构建git工作流

最近在整理eslint，prettier，tslint，stylelint...等代码规范的东西，也顺带手说一下pre-commit吧。顾名思义，pre-commit就是在我们commit代码之前做一些事情，比如代码检查，避免把不规范的代码提交到仓库。其实pre-commit是git提供的一个hook，我们可以在项目.git/hooks目录下查看git为我们提供的一些hook

可以看到很多xx.sample文件，这些都是git为我们提供的hook模版文件。其中就有我们今天要说到的pre-commit，我们需要做的就是利用这些模版文件，创建hook。git会自动执行这些hook，比如pre-commit，在commit之前，git会自动执行。

这里我们提供两种方式生成git hook

pre-commit

首选，安装项目依赖

yarn add pre-commit -D

然后访问.git/hooks目录，你会很惊奇地发现多了一个pre-commit hook。其实也没什么魔法，就是生成了一个exec可执行文件，指向./node_modules/pre-commit/hook

接下来我们需要配置package.json，告诉node，在pre-commit的时候，我们要做什么事情

{
  "scripts": {
    "eslint": "eslint src/*.js"    
  },
  "precommit": {
    "silent": true,
    "run": ["eslint"]
  },
}

pre-commit参数配置参考pre-commit.com

如果想跳过pre-commit hook，可以加上 --no-verify 参数

git commit -am "bypass" --no-verify

husky + lint-staged

husky：自动生成git hooks的工具

lint-staged：检查git暂存区的内容

由于husky4.x和5.x以后的版本配置方式区别较大，这里我们分开说

husky4.x

第一步安装依赖，如我们安装v4.3.8

yarn add husky@4.3.8 lint-staged -D

安装完成后 ls .git/hooks ,你会发现husky帮我们生成了所有的git hook

第二步，在package.json中配置husky

{
  "husky": {
    "hooks": {
      "pre-commit": "echo \"哈哈哈哈 husky 可以用了\" && lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts}": "eslint --fix --quiet"
  }
}

注册git工作流中，各hook分别要做的事情

第三步，提交代码验证，控制台会打印“哈哈哈哈 husky 可以用了”，并且eslint会检查项目代码

husky5.x+

第一步，直接安装husky最高版本，写笔记的时候是6.0.0

yarn add husky lint-staged -D

并且删掉package.json中的husky配置第二步，启用git hooks

npx husky install

第三步，添加git hooks，注册git hooks触发时执行的指令

npx husky add .husky/pre-commit "npx lint-staged"

git commit 时会执行“npx lint-staged”，即package.json中的lint-staged配置内容

好啦，husky的各版本使用就是这样了。相比4.0之前的版本，5.0+抽离了git hooks，不再生成git hooks，并且也不需要在package.json中配置了！！！

总结

pre-commit体积较小，只会产生一个pre-commit hook，且使用灵活
husky（4.x及之前的版本）会生成所有git hooks，功能齐全。5.x以后的版本与之前的版本区别较大，可以参考文档
如果在开发中只想单纯监听pre-commit，建议直接使用pre-commit