Loading...
墨滴

fengxiaodong

2021/11/16  阅读:44  主题:默认主题

手把手教你如何使用Commitizen规范化提交代码

一、前言

一般团队中都是使用git来做版本管理,结合Eslint +Prettier这样的工具可以使得代码按照约定好的规则规范起来,最后在提交到git仓库中。提交到仓库的commit信息最好也要规范起来,不然其他人在阅读提交记录时也会非常头疼,就像下面这种情况一样:

对于git提交规范来说,不同的团队可能会有不同的标准,推荐目前比较流行的 Angular 团队规范延伸出的Conventional Commits specification(约定式提交)

约定式提交规范要求如下:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

翻译过来就是:

<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

举个栗子:

但是有个问题是,如果每次commit都这么写,着实有点痛苦,比较麻烦。所以就诞生了Commitizen这样的工具,只需要使用git cz命令代替git commit就可以帮我们书写commit信息,非常强大!

二、准备

开始前,需要做一些准备,使用git initnpm init -y初始化一个git管理以及npm的项目:

然后全局安装commitizen

npm install -g commitizen

commitizen-demo文件夹中安装cz-customizable

npm install cz-customizable --save-dev

新建.gitignore文件,防止将node_modules文件提交:

最后,项目目录结构如下:

三、Commitizen 提交配置

EslintPrettier工具一样,commitizen在工作前,也需要进行配置。

添加以下配置到package.json中:

在根目录下创建.cz-config.js文件,因为commitizen是符合CommonJS规范的,所以需要通过module.exports导出配置:

根据约定式规范提交要求,我们先配置types,该属性是我们提交commit时的类型

然后配置步骤,步骤是为了告诉commitizen如何提交,简单来说就是第一步要什么,第二步要输入什么....:

最后,可以约束一下文字的长度(看团队需求),比如subject约束文字长度为:72:

更多配置项可以参考官网,这里不过多赘述。

四、实战

完成配置后,我们来试下效果,创建一个README.md文件,然后使用git cz命令提交代码:

可以看到,控制台输出了对应的类型选择,这里选择新功能,回车下一步:

输入修改范围,回车下一步:

下面的步骤依次输入完,如果没有可以按回车跳过,最后输入yes确认:

输入git log查看提交记录:

这样,一个标准的commit信息就提交了。

五、查看 changeLog

有时候,我们想要查看commitchange log信息,可以使用工具conventional-changelog

在项目安装cz-conventional-changelogconventional-changelog-cli

npm install conventional-changelog conventional-changelog-cli --save-dev

package.json增加脚本信息:

运行脚本:

npm run git:log

就可以看到刚才提交的commit信息了

六、总结

commitizen已经是目前作为git提交规范中最优秀的工具之一了。在团队开发中,一般结合EslintPrettier工具一起使用,养成良好的代码规范是每个程序员的必修课!

七、参考

fengxiaodong

2021/11/16  阅读:44  主题:默认主题

作者介绍

fengxiaodong