利用 git 钩子做代码提交前的检查

前言

在前面《使用ESLint构建团队代码规则》《如何在WebStorm中配置ESLint》两篇文章中我介绍了eslint的搭建和项目中的运用，但还存在一个问题就是团队开发时，如何保证每个人提交的代码都是按规范修改好的？这时候我们可以利用git做提交前的最后把关。

原理

在git中，我们每次执行commit、push等操作时，都会触发一个或多个shell脚本，这些脚本我们称为钩子，它们存放在.git/hooks目录下，我们可以看到目录下有commit-msg.sample、pre-commit.sample等文件，这些都是案例文件，不会执行，要想执行的话把后面的.sample后缀去掉就可以了。

钩子执行顺序是有先后的

• 前置（pre）钩子，在动作完成前调用
• 后置（post）钩子，在动作完成后执行

当钩子在非零状态下退出，git操作就会停止。

所以总结来说，就是利用这一特点，在钩子里写入指令，执行git操作前先运行钩子里的指令，调用eslint检查代码，如果代码不符合规范就非零退出，git操作就会停止，从而达到我们的目的。

第三方插件

但是钩子默认是不继承的，clone下来的项目不会带有这些钩子，这样在团队开发中就不够优雅了。并且，我们如果只修改一个文件，就调用eslint检查了整个项目的文件(即使你能用.eslintignore忽略一部分)，这样是性价比不高的操作。所以我们引入第三方插件帮助解决。

1. 安装插件

项目package.json目录所在路径下执行

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

• eslint：进行 JavaScript 代码检查的基础包；
• husky：在 .git/hooks 中写入 pre-commit 等脚本激活钩子，在 Git 操作时触发；
• lint-staged：参考 Git 中 staged 暂存区概念，在每次提交时只检查本次提交的文件。

2. 修改 package.json 配置，设置 precommit 和 lint-staged

"scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "linters": {
      "static/js/**/*.js": [
        "./node_modules/.bin/eslint --fix",
        "git add"
      ]
    }
  },

3. 文件过滤路径说明

指相对于package.json的路径，使用glob pattern匹配模式。

{
    "*.js": "工程下所有的 js 文件",
    "**/*.js": "工程下所有的 js 文件",
    "src/*.js": "src 目录中所有的 js 文件",
    "src/**/*.js": "src 文件夹下所有的 js 文件"
}

4. 钩子工作流程说明

当开发者执行 git add 操作将代码提交到暂存区后，再执行 git commit 操作时：

1. 由于安装husky后其在.git/hooks中写入了pre-commit钩子，该钩子在 git commit 执行时被触发，执行npm run precommit脚本（即lint-staged命令）；
2. lint-staged的配置，就是利用linters对暂存区的文件路径应用过滤规则，匹配的文件将执行后面配置的任务，这里的任务就是调用项目中的eslint指令检查文件，如果报错则先自动修复--fix，最后把没有问题的代码加入暂存区git add。
3. 如果最终还有报错，则流程终止，无法执行 commit 操作。

总结

到此整个项目就应用上了eslint进行代码质量检查，解决了开发中检查和团队开发的问题，希望能帮助你解决同样的问题，谢谢！