前端自动化规范工具husky结合commitlint进行提交信息的校验
实现功能
- 对提交信息进行校验
安装
$npm install --save-dev @commitlint/cli @commitlint/config-angular
添加git hooks
添加前置钩子
npx husky add .husky/commit-msg "npm-run-test"
.husky
文件夹中会生成commit-msg文件
可以看到npm-run-test就是我们要在提交前执行的npm命令,我们将命令替换成npx --no-install commitlint --edit $1
添加配置
创建commitlint.config.js
文件
写入内容
module.exports = {
extends: ['@commitlint/config-angular'],
rules: {
'type-case': [0],
'type-empty': [2, 'never'],
'type-enum': [
2,
'always',
[
'build',
'ci',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test'
],
],
'scope-empty': [2, 'never'],
'subject-empty': [2, 'never'],
},
};
提交规范
type(scope-case): subject
- type是用来标记做了什么动作
- scope-case用来标记修改了哪个模块
- subject是自己输入提交详情信息
[
'build',
'ci',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test'
]
举例
fix(repayment): 修复还款利息计算错误
fix(还款管理): 修复还款利息计算错误
perf(生成管理): 添加报表带出功能
style(仪表盘): 修改数据显示布局
参考文档
angular提交规范@commitlint/config-angular - npm (npmjs.com)
@commitlint/cli参考GitHub - conventional-changelog/commitlint: 📓 Lint commit messages
配置命令行交互
安装依赖
npm install --save-dev commitizen @commitlint/cz-commitlint
添加配置
package.json
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
},
"scripts": {
"commit": "git-cz"
},
修改commitlint.config.js
module.exports = {
extends: ['@commitlint/config-angular'],
parserPreset: {
parserOpts: {
headerPattern: /^(.*?)(?:\((.*)\))?:?\s(.*)$/,
headerCorrespondence: ['type', 'scope', 'subject'],
},
},
rules: {
'type-case': [0],
'type-empty': [2, 'never'],
'type-enum': [
2,
'always',
[
'📦build',
'👷ci',
'📝docs',
'🌟feat',
'🐛fix',
'🚀perf',
'🌠refactor',
'🔂revert',
'💎style',
'🚨test',
],
],
'scope-empty': [2, 'never'],
'subject-empty': [2, 'never'],
},
prompt: {
settings: {},
skip: ['body', 'footer', 'issues'],
messages: {
skip: '回车直接跳过',
max: '最大%d字符',
min: '%d chars at least',
emptyWarning: '内容不能为空,重新输入',
upperLimitWarning: 'over limit',
lowerLimitWarning: 'below limit',
},
questions: {
type: {
description: '请选择提交类型',
enum: {
'🌟feat': {
description: '增加新功能',
title: 'Features',
emoji: '🌟',
},
'🐛fix': {
description: '修复bug',
title: 'Bug Fixes',
emoji: '🐛',
},
'📝docs': {
description: '修改文档',
title: 'Documentation',
emoji: '📝',
},
'💎style': {
description: '样式修改不影响逻辑',
title: 'Styles',
emoji: '💎',
},
'🌠refactor': {
description: '功能/代码重构',
title: 'Code Refactoring',
emoji: '🌠',
},
'🚀perf': {
description: '性能优化',
title: 'Performance Improvements',
emoji: '🚀',
},
'🚨test': {
description: '增删测试',
title: 'Tests',
emoji: '🚨',
},
'📦build': {
description: '打包',
title: '打包',
emoji: '📦',
},
'👷ci': {
description: 'CI部署',
title: 'Continuous Integrations',
emoji: '⚙️',
},
'🔂revert': {
description: '版本回退',
title: 'Reverts',
emoji: '🔂',
},
},
},
scope: {
description: '请输入修改的范围(可选)',
},
subject: {
description: '请简要描述提交(必填)',
},
body: {
description: '请输入详细描述(可选)',
},
isBreaking: {
description: '有什么突破性的变化吗?',
},
breakingBody: {
description:
'一个破坏性的变更提交需要一个主体。 请输入提交本身的更长的描述 ',
},
breaking: {
description: 'Describe the breaking changes',
},
isIssueAffected: {
description: '是否有未解决的问题?',
},
issuesBody: {
description:
'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself',
},
issues: {
description: '请输入问题说明',
},
},
},
};
命令行输入npm run commit就可以进行提交操作