前言
在前面《使用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 操作时：
- 由于安装
husky后其在.git/hooks中写入了pre-commit钩子，该钩子在 git commit 执行时被触发，执行npm run precommit脚本（即lint-staged命令）； -
lint-staged的配置，就是利用linters对暂存区的文件路径应用过滤规则，匹配的文件将执行后面配置的任务，这里的任务就是调用项目中的eslint指令检查文件，如果报错则先自动修复--fix，最后把没有问题的代码加入暂存区git add。 - 如果最终还有报错，则流程终止，无法执行 commit 操作。
总结
到此整个项目就应用上了eslint进行代码质量检查，解决了开发中检查和团队开发的问题，希望能帮助你解决同样的问题，谢谢！
网友评论