前端git commit 代码简单lint校验 以及格式化代码

[cg669]

团队开发中，由于每个人风格不一，导致代码可能会存在很多不是很严谨的代码。

此时我们可以借助lint工具进行检验，但是仍然会有不足，比如团队成员为了赶时间人为忽略。

为了避免团队有的人没有去手动更改lint所报出的问题，以及在commit的时候对所有代码进行基础的检测，比如大小写等容易发生又不容易被发现的问题。

我们可以利用git的钩子来进行一系列的代码校验等处理。

步骤：

1、首先我们要先配置好eslint 也可以顺带配下 stylelint，既然校验就一步到底，js以及css一起校验。（这个可自行找下两种lint的配置）

2、配置好lint以后，我们可以搭配husky。husky  其实就是一个为 git 客户端增加 hook 的工具。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。

3.然后我们可以在package.json文件里面加上如下代码。当然也支持其他写法啊，不过类似，具体可查看husky官网。

4、上面有一个npm run prettier，其实是自定义的一个命令，既然我们开启的文本校验，为什么不加上格式化呢？这样不管每个人开发时候的代码的样子多么丑，最后提交上来，格式都进行了统一。

此处可google下prettier，其实也是一个小的npm 工具包。

5、虽然上面基本满足了本地提交校验以及格式化的需求，但是还是会有漏洞，当用户commit -n的时候，会跳过git hook,这样会导致代码提交上去了，但是却是没有检查的情况。那么我们应该怎么避免有的队员这种操作呢，此时我们可以加上线上校验，当代码提交的git上的时候，我们利用git ci，可以在代码提交完以后进行模拟lint操作，如果不通过就会报错，不能允许合并。如下图。

6、这样我们就避免了团队成员提交的时候，手动跳过commit lint过程。

7、gitlab-ci的配置留到下节再讲哦~~~