上一篇我们介绍了git hooks的挂载工具Husky。我们可以通过配置Husky的方法在pre-commit的钩子上使用eslint来检测自己的代码风格。虽然eslint有自己的文件过滤配置，但还是会在匹配的文件中遍历所有文件，不仅会占用过多的性能，还会将其他人的代码一起格式化，也会使代码检测的过程变得很缓慢。无法达到我们最初的想法，所以我们在这里引入Lint-staged，Lint-staged可以仅仅过滤出Git代码暂存区的文件，来进行我们配置的代码规则检测。

安装

  1. npm install --save-dev lint-staged

配置

  1. // package.json
  2. "husky": {
  3.         "hooks": {
  4.             "pre-commit": "lint-staged"
  5.         }
  6.     },
  7.     "lint-staged": {
  8.         "*.{js,vue}": [
  9.             "eslint --fix",
  10.             "git add"
  11.         ]
  12.     },

Lint-staged也可以使用.lintstagedrc，lint-staged.config.js配置文件，可以不放在package.json中。

Lint-staged仅仅对文件进行一次过滤，并不会直接对文件进行处理，所以对文件的处理我们仍然需要引用eslint来实现。

具体流程为，当文件发生变化时，我们执行git commit命令，Husky就会触发pre-commit钩子，进而执行lint-staged的命令。上述的命令配置为，暂存区的所有js及vue文件，都需要通过eslint的检查，如果通过eslint可以直接格式整理的会整理格式后重新add该文件。如果有“==”这种无法自动格式化的文件，会在git commit时报错并提交失败

其他说明

对于文件过滤配置，lint-staged的格式如下：

  1. {
  2.   // .js 工程中所以js文件
  3.   "*.js": "eslint",
  4.   // .js src目录下的js文件
  5.   "src/*.js": "eslint",
  6. }

因为Lint-staged只是对文件的过滤，所以不仅仅局限于配置eslint检验，在配置的数组中可以支持更多的写法。值得我们去进一步的开发。