手把手教你如何使用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 init 和 npm init -y 初始化一个 git 管理以及 npm 的项目：

然后全局安装 commitizen

npm install - g commitizen

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

npm install cz - customizable--save - dev

新建 .gitignore 文件，防止将 node_modules 文件提交：

最后，项目目录结构如下：

三、Commitizen 提交配置

和 Eslint 、 Prettier 工具一样， commitizen 在工作前，也需要进行配置。

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

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

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

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

最后，可以约束一下文字的长度（看团队需求），比如 subject 约束文字长度为： 72 :

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

四、实战

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

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

输入修改范围，回车下一步：

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

输入 git log 查看提交记录：

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

五、查看 changeLog

有时候，我们想要查看 commit 的 change log 信息，可以使用工具 conventional-changelog

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

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

在 package.json 增加脚本信息：

运行脚本：

npm run git: log

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

六、总结

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

七、参考

• Angular 团队规范
• Conventional Commits specification（约定式提交）

关注我们

大家的支持是我们继续前进的动力，快来关注我们深信服前端团队吧~

同时，如果对我们感兴趣的话，欢迎加入我们，投递简历到 uedc@sangfor.com.cn。