vue 项目git commit 规范限制
vue 项目git commit 规范限制背景Commit Message 格式commitlint 工具Git Hooksvue-cli 创建的项目参考背景不规范的 Git Commit 提交使得现有项目的 Git Log 杂乱无章,长此以往,当我们通过 Git Log 来code review 时分不清哪些是我们的新功能,哪些是修复的 bug,哪些是项目的体验优化等等。所以我们就要为 comm
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
就可以进行检查啦!
参考
更多推荐
所有评论(0)