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

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

  1. eslint
  2. tslint
  3. 单元测试
  4. E2E测试
  5. style lint
  6. commit lint
  7. others checks

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

初识Husky

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

  1. 0依赖,没有依赖第三方的任何JS包
  2. 轻量,20K左右,Husky4要1MB
  3. 快,0.01s的量级,Husky要0.5s
  4. 跨平台,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有多种配置方法。

  1. package.json
  2. .lintstagedrc
  3. .lintstagedrc.json
  4. .lintstagedrc.yaml
  5. .lintstagedrc.yml
  6. 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提交前缀,不过我们也暂时没用上,大家按需自取。