最近在研究腾讯的自动化部署功能时,发现有篇文档介绍了如何规范代码提交:Git commit message 规范,然而在按照文档进行操作时,却无法正确运行。通过搜索发现,主要是husky已经升级到了7版本,与之前的版本无法兼容。下文记录了该方案的安装过程,备后续部署时参考。

安装commitizen

commitizen在提交代码的时候提供了一个交互式的选择界面,方便用户自动生成符合规范的代码提交注释。

使用如下命令即可安装commitizen

npm install -g commitizen cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

在powershell中,生成的.czrc文件是utf-16格式的,需要修改成utf-8格式。

之后,使用git czcz代替原来的git commit -m命令进行代码提交。

image-20210831132718689

如上图所示,使用上下方向按键即可选择提交类别,之后的内容按照提示填写即可。

该方案使用的是angular项目的规范,各字段的详细说明可参考:使用 commitizen 规范 Git 提交说明 - 知乎 (zhihu.com)

在项目中安装commitizen

有些情况下,可能不需要全局安装commitizen,而仅仅是需要在当前项目中使用,那么可以使用--save-dev方式进行安装。

npm install --save-dev commitizen
npx commitizen init cz-conventional-changelog --save-dev --save-exact

这种情况下,不能使用git cz方式进行提交,而应该使用npx cz命令进行提交。或者,也可以在package.json中定义一个scripts,利用npm run的方式进行提交。如:

{
...,
"scripts": {
"cz": "cz"
}
}

此时,可使用npm run cz进行提交。

安装commitlint

commitlint是一个提交注释检查工具,可以根据指定的规则对提交信息进行检查。使用如下命令进行安装:

npm install --save-dev @commitlint/cli @commitlint/config-conventional
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

对于第二行的配置信息,除了单独在commitlint.config.js文件中进行指定,还可以在项目的package.json中新建一个commitlint块,在其中进行指定。

可以使用npx commitlint --from=HEAD~1检查上一条提交信息是否符合规范,还可以指定它从文件中读取信息进行检测。

image-20210831134917745

安装husky实现自动检测

每次在提交前使用命令手动测试是很麻烦的,可以使用hook工具自动在提交时检测提交的注释是否合规。对于git来说,husky是一个很好用的hook工具。

目前,部分教程文档都将配置信息放到package.json的husky字段中,如:

"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},

此方法尝试无效,可能是版本不兼容的问题。当前安装的husky版本为7.0.2,不保证之后的版本适用下文的安装和使用方式,安装过程建议参考官方文档Husky - Git hooks (typicode.github.io)

安装

对于Unix类系统,直接使用npx husky-init && npm install进行安装即可,会自动完成所有的安装步骤。windows系统的powershell似乎不支持&&操作符,只能手动进行安装:

# 1. 安装husky
npm install husky --save-dev
# 2. 激活hooks
npx husky install
npm set-script prepare "husky install"

如果成功安装,在项目根目录会出现.husky目录,其内容如下所示,如果是使用的自动安装的方式,应该还会多一个pre-commit文件,指定了commit之前的操作,如果不需要可以删除。

\.husky
└─_
└─.gitignore
└─husky.sh

配置

可以使用npx husky add"命令来创建hook脚本,我们需要在进行commit操作时对提交信息进行检测,则应该对commit-msg阶段进行hook,具体指令为npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'。执行后,在.husky目录新增了commit-msg文件,其内容如下:

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

npx --no -- commitlint --edit $1

在Linux的shell环境中,上述指令可能无法将$1字符串正确地写入文件,此时需要手动对文件进行修改。

可以手动修改文件内容,以执行不同的操作。

当我们尝试提交时,输入了不符合规范的提交信息,则会对出错的地方给出提示,同时本次提交也不会成功。

image-20210831142840971

另一种调用commitizen的方法

安装完husky后,通过对prepare-commit-msg阶段进行hook,可以在提交阶段对commit注释进行重新修改,此时,可以考虑省去commitlint的步骤。具体方法如下:

# 添加prepare-commit-msg的hook
npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"

此后,当需要提交代码时,使用git commit命令就会自动调用commitizen

经测试,如果commit后面没有加上-m选项,则在调用完commitizen后,仍然会调用git的输入commit注释的交互界面(与未hook的情况一样)。因此,该方法仅提供参考,实用性不大。

参考资料

  1. Git commit message 规范 - CODING 帮助中心
  2. 使用 commitizen 规范 Git 提交说明 - 知乎 (zhihu.com)
  3. 简单使用Commitizen-规范你的commit message - 简书 (jianshu.com)
  4. Husky - Git hooks (typicode.github.io)
  5. husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置_CRPER-CSDN博客