注：本文中的项目基于 Yarn v1 进行包管理

为什么要写这篇文章：受到栗老板之前发在青柚前端 ICU 群里的博客 Commit message 和 Change log 编写指南 – 阮一峰的网络日志 的启发而尝试过使用 commitizen 规范网页项目里的提交请求，但当时 yarn 安装 commitizen 之后执行 commitizen init cz-conventional-changelog --yarn --exact 命令出现了一些状况，导致没有成功。今天打算把 FreshCup 的项目框架先拉起来所以又尝试了下配置这些东西，终于配置成功啦！

▲后续发现是因为使用 npm 安装的 yarn 所安装的包的路径没有被添加到系统 path，因此从理论上而言，使用 yarn 安装 commitizen 实际上是可行的。

使用 git cz 来提交符合 Angular 标准的 Commit 请求

前置环境

Node.js >= v16

Yarn < v2

安装依赖

全局安装 commitizen（建议使用 npm，如果你是使用 npm install yarn -g 命令安装的 yarn，使用 yarn global add 安装 commitizen 似乎存在一些问题，commitizen 没有被添加到系统 PATH）

npm install commitizen -g

当然，如果你不是使用 npm 安装的 yarn，并且你可以确保你的 yarn bin 文件夹被正确添加到了系统 path 中，你也可以使用下面这条命令全局安装 commitizen

yarn global add commitizen

之后我们需要在文件根目录下执行下面这条命令初始化 commitizen（加上 --yarn 参数以使用 yarn 初始化）

commitizen init cz-conventional-changelog --yarn --exact

（我删除了原参考文档中的 –dev 参数）

当当，可以愉快的 git cz 来进行 commit 啦

使用 ghook + validate-commit-msg 拦截不规范的 Commit

yarn add ghooks

yarn add validate-commit-msg

package.json 中的 config 项需要新增 ghook 和 validate-commit-msg 配置字段：

• ghook 的具体配置参照 ghooks – npm (npmjs.com) 的 setup
• validate-commit-msg 直接用 conventional-changelog-archived-repos/validate-commit-msg: DEPRECATED. Use https://github.com/marionebl/commitlint instead. githook to validate commit messages are up to standard 中给出的模板，开箱即用，无需修改（当然你也可以选择自定义）

配置完成后 config 大致如下图

为什么我没使用 husky？因为 husky6.0 配置 hooks 太麻烦了，参见 husky使用总结 – 知乎 (zhihu.com)

完成上述步骤后建议执行一遍 yarn install，以使得我们刚刚编辑的配置内容能够被正确应用

配置完成后如下，不规范的 commit 会报错不被执行

此时我们可以直接使用 git cz 来去辅助我们撰写标准的 commit message，当然，我们依旧可以选择继续使用 git commit -m "commit message" 命令来去直接提交符合 Angular 规范的 commit message

关于 Angular 规范

git commit 规范指南 – SegmentFault 思否

Git Commit Message Conventions – Google 文档

可能导致的问题

在使用 git rebase -i root 命令变基时，会产生如下报错

error: could not detach HEAD

在加上 --no-verify 参数再次执行命令即可正常执行，推测可能是 hooks 造成的影响，因此为了将 hooks 造成的影响降到最低，我更推荐在执行牵扯到 commit 相关的命令时最好加上 --no-verify 参数（实际使用中 git add . 和 git push 命令并未受到影响）