一、全局安装 Commitizen：
npm install - g commitizen @ 4.2.4
二、安装并配置 cz-customizable 插件
npm i cz-customizable@6.3.0 --save-dev
npm i cz-customizable@6.3.0 --save-dev --force （强制下载）
三、添加以下配置到 package.json 中
"config" : {
"commitizen" : {
"path" : "node_modules/cz-customizable"
}
}
四、项⽬根⽬录下创建 .cz-config.js ⾃定义提示⽂件
module . exports = {
types : [
{ value : 'feat' , name : 'feat: 新功能 ' },
{ value : 'fix' , name : 'fix: 修复 ' },
{ value : 'docs' , name : 'docs: ⽂档变更 ' },
{ value : 'style' , name : 'style: 代码格式 ( 不影响代码运⾏的变动 )' },
{
value : 'refactor' ,
name : 'refactor: 重构 ( 既不是增加 feature ，也不是修复 bug)'
},
{ value : 'perf' , name : 'perf: 性能优化 ' },
{ value : 'test' , name : 'test: 增加测试 ' },
{ value : 'chore' , name : 'chore: 构建过程或辅助⼯具的变动 ' },
{ value : 'revert' , name : 'revert: 回退 ' },
{ value : 'build' , name : 'build: 打包 ' }
],
messages : {
type : ' 请选择提交类型 :' ,
customScope : ' 请输⼊修改范围 ( 可选 ):' ,
subject : ' 请简要描述提交 ( 必填 ):' ,
body : ' 请输⼊详细描述 ( 可选 ):' ,
footer : ' 请输⼊要关闭的 issue( 可选 ):' ,
confirmCommit : ' 确认使⽤以上信息提交？ (y/n/e/h)'
},
skipQuestions : [ 'body' , 'footer' ],
subjectLimit : 72
}
五、commitlint安装依赖：
npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
-
创建 commitlint.config.js 文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
-
打开 commitlint.config.js ， 增加配置项（ config-conventional 默认配置点击可查看 ）
module.exports = { // 继承的规则 extends: ['@commitlint/config-conventional'], // 定义规则类型 rules: { // type 类型定义，表示 git 提交的 type 必须在以下类型范围内 'type-enum': [ 2, 'always', [ 'feat', // 新功能 feature 'fix', // 修复 bug 'docs', // 文档注释 'style', // 代码格式(不影响代码运行的变动) 'refactor', // 重构(既不增加新功能，也不是修复bug) 'perf', // 性能优化 'test', // 增加测试 'chore', // 构建过程或辅助工具的变动 'revert', // 回退 'build' // 打包 ] ], // subject 大小写不做校验 'subject-case': [0] } } 注意：确保保存为 UTF-8 的编码格式
六、husky安装依赖：
npm install husky@7.0.1 --save-dev
-
启动 hooks ， 生成 .husky 文件夹
npx husky install
-
在 package.json 中生成 prepare 指令（ 需要 npm > 7.0 版本 ）
npm set-script prepare "husky install"
-
执行 prepare 指令
npm run prepare -
添加 commitlint 的 hook 到 husky中，并指令在 commit-msg 的 hooks 下执行 npx --no-install commitlint --edit "$1" 指令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
-
至此， 不符合规范的 commit 将不再可提交：
git commit -m "test" ⧗ input: test ✖ subject may not be empty [subject-empty] ✖ type may not be empty [type-empty] ✖ found 2 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint husky - commit-msg hook exited with code 1 (error) 那么至此，我们就已经可以处理好了 强制规范化的提交要求，到现在 不符合规范的提交信息，将不可在被提交！
七、通过 pre-commit 检测提交时代码规范
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
关闭 VSCode 的⾃动保存操作 修改⼀处代码，使其不符合 ESLint 校验规则
git commit -m 'test'
~\src\views\Home.vue
13:9 error Strings must use singlequote quotes
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
husky - pre-commit hook exited with code 1 (error)
八、lint-staged ⾃动修复格式错误
修改 package.json 配置：
"lint-staged" : {
"src/**/*.{js,vue}" : [
"eslint --fix" ,
"git add"
]
}
如上配置，每次它只会在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint 规则 ( 这个⻅⽂档 ESLint ) ，校验会出现两种结果：
-
如果符合规则：则会提交成功。
-
如果不符合规则：它会⾃动执⾏ eslint --fix 尝试帮你⾃动修复，如果修复成功则会帮 你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提 交代码 修改 .husky/pre-commit ⽂件
1. #!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged再次执⾏提交代码 发现 暂存区中 不符合 ESlint 的内容，被⾃动修复
