开发过程中为了统一团队编码规范,会用 Eslint 去检查和自动修复 js 代码。但是代码规范检查不通过,还是可以提交 commit 记录的,这显然是有问题的, 还好 git hook 提供了很多钩子函数绑定在 git 各个命令上,这样就可以把 eslint 代码检查放在 pre-commit hook 中, 这样如果eslint 检查不通过就不让提交了。
1、Git hooks(git钩子)
默认情况下项目中 .git/hooks(.git文件夹下的hooks文件夹) 中已经内置了很多 hook,比如 pre-commit。如下图:
image.png
这些hooks文件夹下有很多git默认自带的钩子文件,这里我们主要使用pre-commit这个钩子文件。
我们找到.git/hooks/pre-commit文件,修改当前文件里的内容为:
echo '我是测试pre-commit钩子命令的'
然后在git 面板里执行git commit 命令,可以看到我们在执行git commit 命令时候触发了pre-commit钩子,输出了:'我是测试pre-commit钩子命令的'。如下图
image.png
我们在.git/hooks/pre-commit文件里执行了输出一行字,那如果我们修改当然文件,让文件执行eslint校验,如下图
image.png
注意.git/hooks/pre-commit文件里写 npm run eslint 那么一定要在package.json文件里添加如下代码:
"scripts": { "eslint": "eslint --ext .js,.vue zdyProject/" //注意这个zdyProject/是我测试的文件目录,请根据自己代码自行修改 },
到这里基本就完成了git提交时执行eslint校验功能了。但是在实际的团队项目里我们并不会这样做,因为我们是团队合作,.git/hooks/pre-commit文件修改后只会在本地,并不能上传到git上供其它成员使用,因为git会忽略.git文件夹下的文件。这个时候husky就可以解决这个问题。
2、husky
github为了解决.git配置不能提交远程仓库的问题,husky 出来了,husky 在你npm i安装完依赖只有自动执行husky install。
2.1、安装husky
npm install husky -D
2.2、使用husky
编辑package.json在script里添加prepare的值为husky install
"scripts": { "prepare":"husky install" },
然后执行npm run prepare,这个命令做了什么事呢 ?实际上就是创建 .husky 目录,修改了.git/config文件里的hooksPath字段(设置 .husky 目录为 git hooks 目录)
image.png
我们在.husky目录下创建一个pre-commit文件,里面放入代码 npm run eslint(如下图a)。
我们随便修改一下项目里的文件,然后执行git add .,git commit -m '测试husky',发现代码已经被拦截,没有提交,因为index.vue代码不符合规范(效果如下图a)。
a.png
到这里husky的简单配置已经完成,但是试想一下有没有问题?,假如项目里有a.js,b.js文件,我修改了a.js,b.js文件,但是我执行了git add a.js(也就是只把a.js文件提到了git缓存),那如果我们现在git commit 应该也只应该校验a.js才对,但是按照上面的配置,我们会在git commit的时候会校验的项目下的全部文件,这显然不对,也就是我们.husky目录下的pre-commit文件内容显然是不能够做到这样的,这时候就必须改写pre-commit文件内容,pre-commit文件是一个shell文件,对前端而言肯定是一大难题,不好写。这个时候就要用到lint-staged,用它来解决这个问题。
3、lint-staged
lint-staged作用:对 Git 暂存区代码文件进行 bash 命令操作等等。
先安装
npm i lint-staged -D
package.json添加script
"scripts": { "eslint": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "prettier --write", "eslint --ext .js,.vue" ] }
随便修改一下项目里a.js,b.js文件,然后执行git add a.js,git commit -m 'test',可以发现调用了 eslint 去检查代码,eslint只检查了a.js文件,并没有校验b.js文件。检查不通过就退出commit。如下图b