引言
这个需求主要是组内成员用的编辑器不统一，代码风格也各异，所以在修改代码时，如果格式化了代码，在code review阶段很难分辨修改了的代码。当然，代码风格统一还有其他好处，这里就不不多废话了。
先看效果
源文件
HelloWorld()后故意留个报错，而且我们没有加分号。
HelloWorld()后的报错没有了，而且分号自动加上去了。这是用了eslint自动修复的功能。
总结下： 在我们提交代码时，先自动帮我们格式化代码，然后使用eslint检查代码，并自动修复错误，在修复不了的时候，报错给我们。并且报错后此次的commit不会提交。
下面看如何配置。
使用的工具
- husky。一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。
- prettier。 一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。
- eslint。 代码检查工具。eslint也可以负责一部分代码格式检查的工作，但是prettier已经做的很好了，所以我便没用eslint的代码格式检查，只让其负责代码错误检查。
- lint-staged。在你提交的文件中，执行自定义的指令。don’t let ? slip into your codebase. — lint-staged
安装
安装eslint
npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
复制代码安装prettier
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
复制代码安装husky，lint-staged
npm i -D husky lint-staged pretty-quick
复制代码prettier配置
- prettier 代码格式化核心
- eslint-plugin-prettier 插件，可以让
eslint使用prettier规则进行检查，并使用--fix选项。像之前的格式不对时，eslint提示的红线。 - eslint-config-prettier 插件，之前说了
eslint也会检查代码的格式，这个插件就是关闭所有不必要或可能跟prettier产生冲突的规则。
在eslintrc.json添加如下配置：
{
"extends": ["airbnb", "plugin:prettier/recommended"],
}
复制代码这个配置做如下三件事：
- 使
eslint-plugin-prettier生效 - 不符合
prettier/prettier的规则，会报错。就是之前截图中的红线。 - 使
eslint-config-prettier生效。就是会覆盖eslint中与prettier冲突的配置。
prettier配置文件
prittier配置文件支持很多种，具体可以看这里。我使用的是.prettierrrc格式，因为试过其他格式，但是只有.prettierrrc，vscode才可以识别。 生成配置可以直接用官网上的try it out,左下角有导出配置。下面这份配置基本上是风格要求的全部了，具体可按照个人爱好进行配置。
{
"printWidth": 120, // 一行最大多少字符
"tabWidth": 2, // tab占用的字符数
"useTabs": false, // 是否使用tab代替空格
"semi": true, // 是否每句后都加分号
"singleQuote": true, // 是否使用单引号
"jsxSingleQuote": false, // jsx是否使用单引号
"trailingComma": "all", // 数组尾逗号。
"bracketSpacing": false, // {foo: xx}还是{ foo: xx }
"jsxBracketSameLine": false, //看官网
"arrowParens": "always" //剪头函数参数是否使用（）
}
复制代码eslint配置
直接上配置：
{
"extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"parser": "babel-eslint",// 解决ES6 improt会报错
"env": { // eg如果不配置browser，window就会被eslint报undefined的错
"es6": true,
"browser": true,
"node": true
},
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"class-methods-use-this": 0,
"import/no-named-as-default": 0,
"react/jsx-filename-extension": [
"error",
{
"extensions": [".js", ".jsx"]
}
]
}
}
复制代码husky钩子pre-commit配置
"husky": {
"hooks": {
"pre-commit": "lint-staged" // pre-commit，提交前的钩子
}
},
"lint-staged": {
// 此处可以配置文件夹和文件类型的范围
"src/**/*.{jsx,txs,ts,js,json,css,md}": [
"prettier --write", // 先使用prettier进行格式化
"eslint --fix", // 再使用eslint进行自动修复
"git add" // 所有通过的话执行git
]
},
复制代码husky会在你提交前，调用pre-commit钩子，执行lint-staged，如果代码不符合prettier配置的规则，会进行格式化；然后再用eslint的规则进行检查，如果有不符合规则且无法自动修复的，就会停止此次提交。如果都通过了就会讲代码添加到stage，然后commit。
其他的坑
- 尾逗号 只有换行时才会有效果：
trailingComma配置为all
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
let noTrailingComma = [a , b,c]
}
复制代码格式化后为
function HelloWorld({
greeting = "hello",
greeted = '"World"',
silent = false,
onMouseOver, // 这里有逗号
}) {
let noTrailingComma = [a, b, c]; // 注意这里c后面没有逗号
}
复制代码- vscode配置 我的vscode默认使用的是全局安装的eslint，没有使用项目本地的，所以要更新下全局的eslint插件版本。如果小伙伴知道如何配置的，跟我说下哈。
结尾
如果小伙伴有看不明白或者我写的不清楚的，有问题的，欢迎指正~