应用场景
在多人协作项目中，如果代码风格统一、代码提交信息的说明准确，那么在后期协作以及Bug处理时会更加方便。下面介绍2种工具
1、git提交规范，我们使用Commitizen工具来撰写合格的 Commit message
第一步：全局安装，安装命令如下。
npm install -g commitizen
第二步：在项目目录里，运行下面的命令，使其支持 Vue 的 Commit message 格式。
commitizen init cz-conventional-changelog --save --save-exact
第三步：配置，打开项目的 package.json 文件，配置如下。
{ "scripts": { "commit": "git-cz", }, "config": { "commitizen": { "path": "node_modules/cz-conventional-changelog" } } }
以后，凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。
注意：
全局安装使用 git cz 来代替 git commit
局部安装使用 npm run commit 脚本来代替 git commit
我们上面的是使用全局安装
2、安装配置commitlint、配置一套属于我们自己的git commit msg 校验规则
第一步：安装如下工具
npm install @commitlint/cli --save-dev
npm install @commitlint/config-conventional --save-dev
第二步：初始化@commitlint/cli的配置文件，在项目根目录创建名为commitlint.config.js的文件，代码如下：
/* \'feat\', //新功能 \'fix\', //修补 \'docs\', //仅文档新增改动 \'style\', //仅样式改动 \'refactor\', //重构（即不是新增功能，也不是修改bug的代码变动） \'test\', //测试用例 \'code\' //优化代码 */ module.exports = { extends: [\'@commitlint/config-conventional\'], rules: { \'type-enum\': [ 2, \'always\', [\'feat\', \'fix\', \'docs\', \'style\', \'refactor\', \'test\', \'code\'] ] } }
这个时候我们进行
git add . git commit -m ""
git commit的时候会触发commlint。进行提交规范校验！！！
上面我们就完成了commitlint的安装与提交规范的制定。检验commit message的最佳方式是结合git hook，所以需要配合Husky
3、理解git hooks 和 使用husky制定提交时作代码校验
husky继承了Git下所有的钩子，在触发钩子的时候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必须先将代码放到git 仓库中，否则本地没有.git文件，就没有地方去继承钩子了。
husky：一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。
lint-staged：在你提交的文件中，执行自定义的指令。比如进行一些文件的格式化还有自动修复等等！！！
第一步：安装，命令如下
npm i -D husky lint-staged pretty-quick
第二步：在package.json中配置上我们的husky的选项
"husky": { "hooks": { "pre-commit": "lint-staged" // pre-commit，提交前的钩子 } }, "lint-staged": { // 此处可以配置文件夹和文件类型的范围 "src/**/*.{jsx,txs,ts,js,json,css,vue}": [ "prettier --write", // 先使用prettier进行格式化 "eslint --fix", // 再使用eslint进行自动修复 "git add" // 所有通过的话执行git ] }
第三步：把前面配置好commitlint结合到husky，加入
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
package.json中配置完整代码如下
"husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" "pre-commit": "lint-staged" // pre-commit，提交前的钩子 } }, "lint-staged": { // 此处可以配置文件夹和文件类型的范围 "src/**/*.{jsx,txs,ts,js,json,css,vue}": [ "prettier --write", // 先使用prettier进行格式化 "eslint --fix", // 再使用eslint进行自动修复 "git add" // 所有通过的话执行git ] }
这段配置告诉了git hooks，当我们在当前项目中执行 git commit -m \'测试提交\' 时将触发commit-msg事件钩子并通知husky，从而执行 commitlint -E HUSKY_GIT_PARAMS命令，也就是我们刚开始安装的./node_modules/.bin/commitlint，它将读取commitlint.config.js配置规则并对我们刚刚提交的测试提交这串文字进行校验，若校验不通过，则在终端输出错误，commit终止。
通过以上步骤，我们就完成了整个规范的配置
4、总结整个工作流程及原理
husky和commitlint工作流程原理大致如下
简要通俗原理
5、集成ESLint，可以看其他文字里面的配置
6、最后我们，我们在package.json配置一下简便命令
以上配置完结合实际情况配置npm命令完整代码如下
"scripts": { "c": "git add . && git-cz && git push", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "eslint --fix --ext .js,.vue src", "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"", }, "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }, "husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", "pre-commit": "npm run lint" } }, "lint-staged": { "src/**/*.{js,json,css,vue}": [ "prettier --write", "eslint --fix", "git add" ] },
我们就可以使用npm run c 来进行提交代码跟进行进行提交代码前的规范校验及提交规范
选择完，下面的提示注解如下
注意：不要使用 git bash （不能进行键盘上下选择）我们用vscode
参考学习文章：
https://zhuanlan.zhihu.com/p/100427908
https://blog.csdn.net/qq_29055201/article/details/89248572
https://blog.csdn.net/y491887095/article/details/80594043