git 提交之规范校验 (eslint+husky+prettier)

开发过程中为了统一团队编码规范，会用 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

b.png