项目地址: gitHub
当团队开始执行Angular团队Git Message提交规范，团队成员如何遵守，难道要每次codeReview团队成员的git message,很显然成效很低，而且我们在使用命令commit -m 里书写的时候，很可能因字符拼写错误、存在中英文标点符号导致不统一，解决以下两个问题，基本上保证了团队提交message符合规范。
-
如何能够不用手写，直接通过命令行生成，减少容错率
-
提交的
message，在pre commit阶段校验下，不符合规范抛出错误，不允许提交
Angular规范介绍
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
type
必填项 用于说明 commit 的类别，目前我们团队包含如下：
- feat: 新功能
- fix: bug修复
- refactor: 代码修改，该修改既不是
bug修复也不是添加新功能 - style: 不影响代码含义的更改(空白、格式、缺少分号等)
- docs: 修改文档
- perf: 修改代码以提高性能
- test: 添加缺失的测试或纠正现有测试
- build: 影响构建系统或外部依赖的修改
- ci: 对
CI配置文件和脚本的更改 - chore: 更改配置文件(其他的修改，不修改src源码也不修改测试源码)
- revert: 版本回退
scope
选填项用于说明 commit 影响的范围，根据项目而定，如services、功能模块、单元测试、utils等
subject
必填项 commit 目的的简短描述，结尾不要有句号（。）
body
选填项修改的背景（为什么做这次修改），说明修改逻辑，可多行
footer
选填项有以下两种情况
- 针对不兼容变动修改，
Footer部分为Breaking Change列表 - 关闭
Issue，例如：Closes #001, #002, #003
Commitizen-交互式命令插件，减少容错率
通过交互式命令，自动生成`Commit Message 文档
安装, 推荐全局安装，这样就可以在Git bash、Cmd、Vscode、PowerShell均可以使用
npm install -g commitizen
在项目中安装
commitizen init cz-conventional-changelog --save-dev --save-exact
// 如果使用yarn:
commitizen init cz-conventional-changelog --yarn --dev --exact
cz-conventional-changelog: 执行git cz 命令出现交互式命令适配器
在项目中安装完成后，会在package.json中加入如下：
// package.json
"devDependencies": {
"cz-conventional-changelog": "^3.3.0",
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
执行git cz命令如下：
改命令行还不够友好，我们希望选项是符合自己团队规范的适配器，
cz-customizable-配置适合自己团队适配器
commit格式适配器，改为项目中适配器，而不使用Angular官方适配器 文档
安装
npm install cz-customizable -D
在package.json中config修改配置
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
在根目录下创建.cz-config.js
// .cz-config.js
module.exports = {
types: [
{ value: 'feat', name: 'feat: 新功能' },
{ value: 'fix', name: 'fix: bug修复' },
{ value: 'refactor', name: 'refactor: 代码修改，该修改既不是bug修复也不是添加新功能' },
{ value: 'style', name: 'style: 不影响代码含义的更改(空白、格式、缺少分号等)' },
{ value: 'docs', name: 'docs: 修改文档' },
{ value: 'perf', name: 'perf: 修改代码以提高性能' },
{ value: 'test', name: 'test: 添加缺失的测试或纠正现有测试' },
{ value: 'build', name: 'build: 影响构建系统或外部依赖的修改（示例范围：gulp, broccoli, npm）' },
{ value: 'ci', name: 'ci: 对CI配置文件和脚本的更改' },
{ value: 'chore', name: 'chore: 更改配置文件(其他的修改，不修改src源码也不修改测试源码)' },
{ value: 'revert', name: 'revert: 版本回退' },
// { value: 'add', name: 'add: 添加依赖' },
// { value: 'del', name: 'del: 删除代码/文件' },
// { value: 'init', name: 'init: 初始提交' },
// { value: 'ui', name: 'ui: 更新UI' },
],
scopes: [],
messages: {
type: '<type>选择更改类型:\n',
scope: '<scope>更改的范围:\n',
subject: '<subject>简短描述:\n',
body: '<body>详细描述. 使用"|"换行:\n',
breaking: 'Breaking Changes列表:\n',
footer: '<footer>关闭的issues列表. E.g.: #31, #34:\n',
confirmCommit: '确认提交?',
},
// allowcustomscopes为true,在 scope 选择的时候，会有 empty 和 custom 可以选择,empty:空；custom：自己输入
allowCustomScopes: true,
// 如上设置为 ['feat', 'fix']，只有我们type选择了 feat 或者是 fix，才会询问我们 breaking message
allowBreakingChanges: ['feat', 'fix'],
// 描述的长度限制
subjectLimit: 100,
};
执行git cz命令如下：
commitlint-校验commit message信息
安装
npm install @commitlint/cli @commitlint/config-conventional commitlint-config-cz -D
在项目gitHooks钩子中做校验，配置如下
"gitHooks": {
"commit-msg": "commitlint --config .commitlintrc.js -e -V", // commit message校验
"pre-commit": "lint-staged"
},
新建.commitlintrc.js加入校验配置
module.exports = {
extends: ['@commitlint/config-conventional', 'cz'],
rules：{
// 自定义规则
},
};
注意：含有emoji开头校验为不合法
使用commit -m 写一个错误的message,校验如下：
conventional-changelog-cli -根据message生成changelog文档
生成的文档中只包含tag、feat、fix记录
注意：含有emoji开头将不会加入到changelog中
安装
npm i conventional-changelog-cli -D
在package.json中配置scripts
// package.json
"scripts": {
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"createlog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}
- changelog: 在顶部追加写入到changelog文档中
- createlog: 根据git message从新生成changelog文档
执行命令
npm run createlog，如图：
结束
至此开头两个问题已完美解决，由于有校验工具，changelog的文档也会非常规范，前端同学可以更加愉快的玩耍了。。。
