ESLint结合Git Hooks实现代码提交前的lint检查

前言

在团队开发过程中，如果团队里的某一个成员没有按照要求去使用lint工具，或者说他压根忘记了去使用lint工具，最后直接把有问题的代码提交到了远端仓库，这种情况下我们在后期进行项目集成的时候，就会导致整个项目的代码出现大问题，在这个时候我们的lint工具就丧失了它的意义。

而本身来说呢，我们使用lint的目的就是为了确保我们提交到仓库的代码都是没有问题的，而且格式也是良好的，那么我们该怎么解决这个问题呢。

如果我们只是单纯的靠口头约束要求团队成员在提交代码之前都必须执行lint，这样的结果必然滞留于形式，所以更好的办法就是通过某种方式，我们可以强制要求代码在提交之前，必须要先通过lint的检查，这也就是我们接下来学习的Git Hooks。

一、Git Hooks是什么

Git Hooks也称为git钩子，每个钩子都对应一个任务。（例如commit、push）

我们可以直接找到某个具体的钩子，然后通过编写一些具体的shell脚本，定义一些当钩子触发的时候要去执行的任务。

我创建了一个目录，并初始化了git仓库。

打开 .git，我们可以看到其中的hooks目录

hooks目录钟存放了很多sample文件，这里面的每一个sample，其实就是每一个git钩子

在这里我们只需要去关注pre-commit.sample这个钩子，因为它对应的就是commit操作，当我们在执行commit的时候就会去触发这个钩子当中所定义的一些任务。

我们将pre-commit.sample拷贝一份，重命名为pre-commit，将其内容修改为如下：

#!/bin/sh // 决定我们当前代码的运行环境
echo "before commit test text" // 编写一段简单的代码以作演示

然后在项目目录下创建一个测试的txt文件，随便写点内容，之后执行git操作

可以看到我们刚才在钩子中自定义的内容在这里输出了

二、Husky模块的使用

我们希望通过git钩子在代码提交之前去强制对代码执行lint操作，但是这里我们就遇到了一个很现实的问题，比如说，当下很多前端开发者并不擅长使用shell脚本来编写功能，而当前的功能又是我们必须要去使用的，所以就有人开发了一个npm模块，直接将Git Hooks的操作进行一个简单化的实现，这个模块就是Husky。

有了Husky模块，我们就可以实现在不编写shell脚本的情况下，也能够去直接使用git钩子所带来的一些功能。

在使用Husky之前，我们需要将我们先前测试钩子所创建的pre-commit文件删除掉，否则它会影响到Husky的工作。

安装Husky

yarn add husky --dev

配置package.json

"scripts":{
    "lint":"eslint ./index.js --fix"
  },
"husky":{
    "hooks":{
      "pre-commit":"npm run lint"
    }
  }

这样我们在使用git提交代码的时候就会执行npm run lint，也就是执行eslint ./index.js --fix

三、lint-staged

经过以上对Husky的使用，我们已经可以对代码在commit之前进行lint检查，但是如果我们想要在检查之后再对代码进行一些后续的操作，例如格式化，这时候Husky就显得有些不够用了。

所以我们就要用到另一个模块，也就是 lint-staged。它可以配合Husky，再对代码继续执行一些其他的操作。

安装lint-staged

yarn add lint-staged --dev

配置package.json

  "scripts": {
    "precommit":"lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged":{
    "*.js":[ // 在这里配置一些我们后续想要执行的任务
      "eslint --fix",
      "git add"
    ]
  }

如此一来，我们对代码修改后，执行git add .，再执行git commit -m "111"提交代码，就会执行eslint --fix命令，检查代码没问题后会继续执行git add命令，最后我们就可以通过git push将代码推送至远端仓库了。