前言

合作开发时，团队内每个成员代码风格不同。而每次让成员自己跑npm run fix又过于麻烦而且不可控，所以使用husky + lint-staged + eslint + prettier实现git commit前自动格式化并通过ESlint检查

npm模块

prettier 代码格式化模块，和vscode上安装的Vetur扩展工具使用的格式化相同
husky git的钩子，在git的hook中执行一些命令
lint-staged 对git暂存的文件进行lint检查
eslint js代码检测工具

操作流程

1.安装依赖

npm install --save-dev prettier husky lint-staged eslint

2.配置规则

2.1 配置prettier的规则

项目根目录新建.prettierrc.json文件，内容为（这里为了方便加了中文注释，实际需要将注释去掉）

{
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}

官方参考：Prettier中文网

2.2配置eslint规则

./node_modules/.bin/eslint --init

然后可以自选eslint的提示选项，具体根据项目不同选择不同

在项目自动在根目录新增加了一个.eslintrc.json文件，在rules选项中校验规则：

"rules":{
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": "error",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "error",
    // 禁止出现空语句块,允许catch出现空语句
    "no-empty": ["error", {"allowEmptyCatch": true}],
    // 禁止对 catch 子句的参数重新赋值
    "no-ex-assign":"error",
    // 禁止不必要的布尔转换
    "no-extra-boolean-cast": "error",
    // 禁止不必要的分号
    "no-extra-semi": "error",
    // 强制所有控制语句使用一致的括号风格
    "curly": "error"
    
}

更多校验规则可以查看eslint官网

3.配置husky和lint-staged

先配置huksy
Edit package.json > prepare script and run it once:

npm set-script prepare "husky install" && npm run prepare

Add a hook:

npx husky add .husky/pre-commit "npm test"

可参考husky

scripts中添加test
package.json

"scripts": {
    ...
    "test": "lint-staged"
},
"lint-staged": {
    "src/**/*.tsx": [
      "eslint --ext .tsx,.ts --fix ./src",
      "prettier --write",
      "git add"
    ]
  }

记得要加上git add，否则格式化后的更改不会添加到暂存区

4.检测

git add .
git commit -m '测试'

此时就会自动格式化后进行eslint校验，如果有错误的话，commit会失败，并给出eslint提示的错误，修改后再次提交就可以了，下面是成功的例子

参考资料：
[1] 代码提交git时自动格式化并通过ESlint检测
[2] husky和lint-staged实现git commit前自动跑lint
[3] 使用 ESLint, Prettier, Husky, Lint-staged 提升你的项目规范
[4] Prettier中文网
[5] eslint官网
[6] husky
[7] lint-staged

git commit时自动格式化并通过ESlint检查

前言