vue 项目git commit 规范限制

背景

不规范的 Git Commit 提交使得现有项目的 Git Log 杂乱无章，长此以往，当我们通过 Git Log 来code review 时分不清哪些是我们的新功能，哪些是修复的 bug，哪些是项目的体验优化等等。
所以我们就要为 commit 提供一个约束，使我们的提交信息更为规范，能够一目了然的知道我们这次提交的内容是什么类型的更改。

Commit Message 格式

Commit Message的格式为：<type>(<scope>): <subject>，其中
1、 type（必填）：用来说明 commit 的类别

 * feat：新增功能
 * fix：bug 修复
 * docs：文档更新
 * style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
 * refactor：重构代码(既没有新增功能，也没有修复 bug)
 * perf：性能, 体验优化
 * test：新增测试用例或是更新现有测试
 * build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
 * ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
 * chore：不属于以上类型的其他类型，比如构建流程, 依赖管理
 * revert：回滚某个更早之前的提交

我们常用的也就

feat
fix
style
perf

2、scope（可选）：用来说明 commit 影响的范围，比如数据层、视图层等，一般我基本不用
3、subject（必填）：说明 commit 的目的描述

commitlint 工具

我们需要借助 commitlint 工具来帮我们检查我提交代码时写的 commit message 是否符合我们上述所说的规范
1、安装工具

npm install --save-dev @commitlint/config-conventional @commitlint/cli

2、项目根目录下创建配置文件

// commitlint.config.js
module.exports = {
	extends: ['@commitlint/config-conventional']
}

如果你要新增配置规则可以在后面追加在 rules: {} 中，关于具体的规则属性可以参考commitlint官网

Git Hooks

commitlint 本身只是一个检测工具，想要让它真正发挥作用需要将其与 git hooks 结合，当我们在使用git命令提交代码的时候能够检测我们的commit语法规则，从而阻止不合法的commit，push等。

vue-cli 创建的项目

在使用 vue脚手架 vue-cli 创建项目的时候，Vue 会自动帮我们做好一些配置，其中就有一个叫做 yorkie 的包，是尤大fork自 husky 的，做了一些小改动，他们的功能是一样的，都是生成一些 git hooks 文件，读取项目中 package.json 的相关配置项去执行一些命令。
如果你的项目也是通过 vue-cli 创建的 Vue 项目，只需要在你的 package.json 文件中加上

"gitHooks": {
	"commit-msg": "commitlint -E GIT_PARAMS"
}

其中 commit-msg 是git hooks（git 钩子）

husky

pre-commit hook

npx husky-init && npm install

项目中会自动生成文件夹 .husky，里面已经存在的 pre-commit 钩子

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test // 修改或删除这里

这里在我们 git commit 时候会触发 pre-commit 这个钩子，执行里面的代码，所以需要将 npm test 修改成你有的 script 命令，比如我这里可以改成 npm run lint

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint

会帮我们进行eslint检查，如果检查不通过会报错，因为我们的 package.json 中配置了 lint 语句
"lint": "vue-cli-service lint --no-fix"
如果希望检查的eslint错误自修复，需要写成
"lint": "vue-cli-service lint"
当然了，如果你什么都不想要做，也可以将 npm test 删除，什么都不写。

commit-msg hook

我们现在创建 commit-msg 钩子

npx husky add .husky/commit-msg

此时 .husky 文件下多了一个 commit-msg 文件，修改成

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

此时提交 git commit 就可以进行检查啦！

参考

Git Commit 团队规范限制