一、前言
- 1、一般我们使用
git提交代码,一般常见的命令就是git add .git commit -m '这是什么代码'git push origin master
- 2、使用传统的方式进行
git提交代码就是下面的结果
-
3、这种方式主要存在几个弊端
- 时间越久自己也不知道自己提交了什么
- 对提交的代码没进行分类管理
- 寻找某次的修改不方便
- 4、针对这些问题,现在业界用的最多的就是Angular团队使用的规范；通过git commit的时候弹出一个vim编辑器来编辑模板类型的一份提交信息，主要格式如下：
<type>(<scope>):<subject>
<BlLANK_LINE>
<?body>
<BLANK_LINE>
<?footer>
* 第一行为必填项：主要就是 【提交类型(影响范围):简要描述】
* `body`为详细描述，个人没怎么用过
* 页脚为破坏性改变或者关闭了某个`issues`
* 5、使用规范后提交代码的格式
![51\_2.png][51_2.png]
二、使用方式
- 1、安装包
npm i -D commitlint-config-cz cz-customizable
npm i -D @commitlint/cli @commitlint/config-conventional
npm i -D commitizen commitlint-config-cz
- 2、在项目的根目录下创建
.cz-config.js文件
module.exports = {
types: [
{ value: 'init', name: 'init: 初始提交' },
{ value: 'feat', name: 'feat: 增加新功能' },
{ value: 'fix', name: 'fix: 修复bug' },
{ value: 'improvement', name: 'improvement: 对当前特性的改进' },
{ value: 'docs', name: 'docs:修改文档' },
{ value: 'style', name: 'style: 样式修改不影响逻辑' },
{ value: 'refactor', name: 'refactor: 代码重构(既不修复bug也不添加特性的代码更改)' },
{ value: 'perf', name: 'perf: 代码重构(改进性能的代码更改)' },
{ value: 'test', name: 'test: 添加缺失的测试或修改现有的测试' },
{ value: 'build', name: 'build: 影响构建系统或外部依赖项的更改(例如作用域:gulp、broccoli、npm)' },
{ value: 'ci', name: 'ci: 对CI配置文件和脚本的更改(示例范围:Travis、Circle、BrowserStack、SauceLabs)' },
{ value: 'chore', name: 'chore: 不修改src或测试文件的其他更改' },
{ value: 'revert', name: 'revert: 版本回退' },
{ value: 'ui', name: 'ui: 更新UI' },
{ value: 'release', name: 'release: ' },
{ value: 'deploy', name: 'deploy: 部署' },
{ value: 'chore', name: 'chore: 更改配置文件' },
{ value: 'add', name: 'add: 添加依赖' },
{ value: 'minus', name: 'minus: 版本回退' },
{ value: 'del', name: 'del: 删除代码/文件' }
],
scopes: [],
messages: {
type: '选择更改类型:\n',
scope: '更改的范围:\n',
// 如果allowcustomscopes为true，则使用
customScope: '此更改的范围(例如组件或文件名称)',
subject: '简短描述:',
body: '详细描述. 使用"|"换行:',
breaking: '变化文件的列表:',
footer: '关闭的issues列表. E.g.: #31, #34:',
confirmCommit: '确认提交?'
},
allowCustomScopes: true,
allowBreakingChanges: ["feat", "fix"]
};
- 3、在项目的根目录下创建
commitlint.config.js
module.exports = {
extends: [
'@commitlint/config-conventional',
'cz'
],
rules: {
// Header
'header-max-length': [2, 'always', 200],
// <type>枚举
'type-enum': [2, 'always', [
'init',
'feat',
'fix',
'improvement',
'docs',
'style',
'refactor',
'perf',
'test',
'build',
'ci',
'chore',
'revert',
'ui',
'release',
'deploy',
'chore',
'add',
'minus',
'del',
]],
// <type> 不能为空
'type-empty': [2, 'never'],
// <type> 格式 小写
'type-case': [2, 'always', 'lower-case'],
// <scope> 不能为空
'scope-empty': [2, 'never'],
// <scope> 格式 小写
'scope-case': [2, 'always', 'lower-case'],
// <subject> 不能为空
'subject-empty': [2, 'never'],
// <subject> 以.为结束标志
'subject-full-stop': [2, 'never', '.'],
// <subject> 格式
// 可选值
// 'lower-case' 小写 lowercase
// 'upper-case' 大写 UPPERCASE
// 'camel-case' 小驼峰 camelCase
// 'kebab-case' 短横线 kebab-case
// 'pascal-case' 大驼峰 PascalCase
// 'sentence-case' 首字母大写 Sentence case
// 'snake-case' 下划线 snake_case
// 'start-case' 所有首字母大写 start-case
'subject-case': [2, 'never', []],
// <body> 以空行开头
'body-leading-blank': [1, 'always'],
// <footer> 以空行开头
'footer-leading-blank': [1, 'always']
}
}
- 4、
package.json中添加
{
...
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
}
- 5、结合
git hook来检验commit message这样当你提交代码不符合规范的时候阻止你提交
npm install husky -D
- 6、在
package.json中配置git hook的钩子函数
{
...
"husky": {
"hooks": {
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
}
- 7、直接在
package.json中配置命令方式进行commit
{
"scripts": {
"commit": "./node_modules/cz-customizable/standalone.js"
},
}
- 8、提交代码的方式
git add .
npm run commit
git push origin master
![51\_3.png][51_3.png]