规范项目的代码提交信息
本文最后更新于 116 天前,其中的信息可能已经有所发展或是发生改变。

注:本文中的项目基于 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 配置字段:

配置完成后 config 大致如下图

image-20211019230937498
config 文件内容

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

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

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

image-20211019222231342
无效的 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 命令并未受到影响)

评论

  1. kawhicurry
    Linux Chrome 103.0.0.0
    4月前
    2022-7-26 16:34:57

    git config –global commit.template

    • 博主
      kawhicurry
      Windows Chrome 103.0.0.0
      4月前
      2022-8-02 3:12:55

      草,好用欸

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇