代码规范工具

• prettier：代码格式化工具，解决 代码风格 的问题

• eslint：代码检查工具，解决 代码质量 的问题

• editorconfig：跨编辑器基本配置

• husky：git 钩子工具

• Lint-staged：在 git 暂存空间运行的 liters 工具，

• eslint-plugin-prettier：让 eslint 使用 prettier 规则进行检查

• eslint-config-prettier: 关闭所有不必要可能跟 prettier 产生冲突的规则

{
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
}

{
  "extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
  "parser": "babel-eslint",// 向后兼容的解析器
  "parserOptions": {
    "ecmaVersion": 7, // 指定 ESMAScript 版本
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": { // eg如果不配置browser，window就会被eslint报undefined的错
    "es6": true,
    "browser": true,
    "node": true
  },
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
		// off 或 0：关闭规则
		// warn 或 1：开启规则，warn 级别的错误 (不会导致程序退出)
		// error 或 2：开启规则，error级别的错误(当被触发的时候，程序会退出)
    "class-methods-use-this": 0,
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  }
}

"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的钩子
    }
  },
  "lint-staged": {
    // 此处可以配置文件夹和文件类型的范围
    "src/**/*.{jsx,tsx,ts,js,json,css,md}": [
      "prettier --write", // 先使用prettier进行格式化
      "eslint --fix", // 再使用eslint进行自动修复
      "git add" // 所有通过的话执行git
    ]
  },