前端工程化 | 使用 commitizen 规范你的 commit message!
什么是 Commit 规范
Commit Message 格式
1 | <type>(<scope>): <subject> |
上面是一次 Commit
后 Message
格式规范,分成标题,内容详情,结尾三个部分,各有各的用处,没有多余项。
头部即首行,是可以直接在页面中预览的部分,入上面图中所示,一共有三个部分 <type>
,<scope>
,<subject>
,含义分别如下:
Type
feat:新功能(feature)
fix:修补 bug
docs:文档(documentation)
style: 格式(不影响代码运行的变动)
refactor:重构(即不是新增功能,也不是修改 bug 的代码变动)
test:增加测试
chore:构建过程或辅助工具的变动
Scope
用来说明本次 Commit
影响的范围,即简要说明修改会涉及的部分。这个本来是选填项,但从 AngularJS
实际项目中可以看出基本上也成了必填项了。
Subject
用来简要描述本次改动,概述就好了,因为后面还会在 Body
里给出具体信息。并且最好遵循下面三条:
以动词开头,使用第一人称现在时,比如 change
,而不是 changed
或 changes
首字母不要大写
结尾不用句号(.)
Body
body
里的内容是对上面subject
里内容的展开,在此做更加详尽的描述,内容里应该包含修改动机和修改前后的对比。
Footer
footer
里的主要放置不兼容变更和 Issue
关闭的信息
Revert
此外如果需要撤销之前的 Commit
,那么本次 Commit Message
中必须以 revert
开头,后面紧跟前面描述的 Header
部分,格式不变。并且,Body
部分的格式也是固定的,必须要记录撤销前 Commit
的值。
Commitizen 是什么?
是一个格式化 commit message
的工具.
Commitizen 安装
第一步
全局安装
1 | npm install -g commitizen |
第二步
全局安装
1 | npm install -g cz-conventional-changelog |
然后,运行下面命令,使其支持 Angular
的 Commit message
格式。
1 | commitizen init cz-conventional-changelog --save --save-exact |
此时,你的package.json
会多出以下配置:
1 | "devDependencies": { |
之后在需要 git commit
的地方使用 git cz
即可。
第三步
项目内安装 commitlint
1 | npm install @commitlint/config-conventional @commitlint/cli |
之后你的 package.json
又会多出一部分的配置
1 | "dependencies": { |
接着在package.json
统计目录新建 commitlint.config.js
文件 然后写入
1 | module.exports = { extends: ["@commitlint/config-conventional"] }; |
第四步
项目中安装husky
,用于校验 commit message
1 | npm install husky |
接着配置 husky
1 | "dependencies": { |
当我们去以不合法的提交信息进行提交代码时,会进行检查。
Commitizen 完整使用流程(简述)
全局安装
1 | npm install -g commitizen |
新建项目文件夹,快速初始化 package.json
文件
1 | npm init --y |
初始化 git
仓库:
1 | git init |
项目内执行:
1 | commitizen init cz-conventional-changelog --save --save-exact |
新建 commitlint.config.js
并写入以下配置:
1 | module.exports = { extends: ["@commitlint/config-conventional"] }; |
暂存文件
1 | git add . |
提交commit message
1 | git cz |
控制台会显示:
1 | git cz |
1 | ? Select the type of change that you're committing: feat: A new feature |
输出 log
1 | conventional-changelog -p angular -i CHANGELOG.md -s |
最后
如有错漏,欢迎与我交流。
参考文章: 阮一峰的博客