使用Husky管理项目的Git Hooks（以配置Uni-app的ESLint和Commit Lint为例）

2021-03-07 约 1 分钟读完搬砖秘籍

Git目前是毫无争议的项目版本管理的王者，而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于：

eslint
tslint
单元测试
E2E测试
style lint
commit lint
others checks

有的同学可能要说，没有这些项目质量也会很好，是的，一般这么说的，要么项目小，要么团队人少。如果你的项目人数>30，又是多分支开发的话，就会大概率需要这玩意。

初识Husky

原生的Git Hooks写法比较麻烦，Husky 做了比较好的封装。截止本文发布之日（2021-03-07），Husky已经发布了5.x版本，建议使用最新的版本，因为它有几个优势：

0依赖，没有依赖第三方的任何JS包
轻量，20K左右，Husky4要1MB
快，0.01s的量级，Husky要0.5s
跨平台，Linux、macOS、Windows都支持

安装

npm install husky --save-dev && npx husky init

是，就这一句就够了，自动会初始项目。观察你的项目，你会发现多了一个.husky目录，package.json中添加了prepare的命令：

添加ESLint

这里有一个策略，如果每次提交都进行全局的ESLint Check的话，效率会很慢。所以我们需要添加一个策略，就是每次提交的时候，只对你所修改的文件的做ESLint，这样效率会提高不少。要实现这个功能，需要借助一个非常好用的包：lint-staged。

先安装：

npm install lint-staged --save-dev

配置命令:

lint-staged有多种配置方法。

package.json
.lintstagedrc
.lintstagedrc.json
.lintstagedrc.yaml
.lintstagedrc.yml
lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format

我个人还是习惯用package.json里写，也可以选择其他的。uni-app的Lint配置比较特殊，配置如下：

"lint-staged": {
  "src/**/*.{js,ts,tsx,vue}": [
    "vue-cli-service lint --fix src"
  ]
},

老的写法里还会加上git add这种，新版本已经不用了，都会自动加上。

配置Commit Lint

说起Commit Lint，有一个非常牛逼的库推荐给大家：conventional-changelog/commitlint: 📓 Lint commit messages

配置这个库，可以直接使用Angular推荐的规则，也可以使用自定义的规则。不过我们项目比较特殊，没有使用Angular的这种高大上的规则，于是直接写一个shell脚本就可以了。

先添加一个commit-msg的 Git Hook:

npx husky add .husky/commit-msg

在生成的shell文件中来使用正则check，怎么获取用户输入的commit msg这个变量呢？直接使用shell编程中的$1、$2之类的就可以了。下面是一个Demo：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# regex to validate in commit msg
error_msg="\nAborting commit. Invalid commit message. \n"
commit_message=$(cat "$1")

check_message_format() {
  local REGEX='^(modify|delete|add):[[:space:]]*[[:graph:]]+'
  if [[ ! $commit_message =~ $REGEX ]]; then
    echo >&2 $error_msg
    exit 1
  fi
}

check_message_format

其他工具推荐

关于Commit提交还有一个比较好用的工具，Commitizen by commitizen

这个工具可以自动生成常用的git提交前缀，不过我们也暂时没用上，大家按需自取。