一. commit
Git 每次commit都需要填写 Commit Message. Commit Message要求简洁明了地概述本次commit的影响/目的。
1. Commit message 格式
此处介绍 Angular 规范
Commit message包含三部分：Header, Body 和 Footer
1.1 header
Header包含3部分信息：type, scope 和 subject。建议每一行都不超过100个字符。
<type>(<scope>): <subject>
<--BLANK LINE-->
<body>
<--BLANK LINE>--
<footer>
1.1.1 type
type用于说明本次提交的类型，必须为一下8种类型之一：
- feat：新特性(feature)
- fix：bug修复
- docs：文档改动（documentation）
- style：不涉及代码运行的的（代码）格式改动（如空格数量调整，去除行尾的';'）
- refactor：重构，既不增加新功能，也不是修复bug的代码变动
- test：增加测试
- chore：构建过程或者辅助工具的变动
- perf：提升性能的代码修改
1.1.2 scope
scope用于说明本次commit影响的范围，如 views, controllers, components等.
scope是可选的，当commit影响多个范围时，可使用*
1.1.3 subject
subject是对本次commit的简短描述：
- 建议以动词开头
- 首字母不需要大小写
- 句尾不需要加.
1.2 Body
Body是对本次commit的详细描述，规范与Header行的subject一致。可以分成多行。
- add detail 1
- add detail 2
1.3 Footer
使用Footer的场景：
- BREAKING CHANGE
- 处理并关闭issue
1.4 Revert
Revert用于撤销某一次的commit, 必须以revert:开头：
revert: This reverts commit <hash>
例子中hash表示被撤销的commit的SHA 标识符。
二. Tools: Commitizen
1.1 bash使用场景
安装
npm install -g commitizen
在项目里初始化
commitizen init cz-conventional-changelog --save --save-exact
1.2 Visual Studio Code 插件
安装插件 git-commit-plugin
使用方式：
- 点击：左侧工具栏 Source control -> 插件栏上方工具图标show git commit template
- Ctrl + Shift + P唤出指令行，输入 show git commit template，选中 show git commit template
之后即可按照Angular规范依次填写commit message信息，最后点击complete即可完成commit message的编辑
三. Commit validate
Git 能在特定的重要动作发生时触发自定义脚本。钩子都被存储在 Git 目录下的 hooks 子目录中，以.sample 结尾。如果想启用，得先移除这个后缀。
脚本的exit code如果是0，说明是正常退出，钩子pass；否则为异常退出，同时退出本次commit。
STAGE_FILES=$(git diff --cached --name-only --diff-filter=ACM -- '*.vue' '*.js')
if test ${#STAGE_FILES} -gt 0
then
echo '开始eslint检查'
which eslint &> /dev/null
if [[ "$?" == 1 ]]; then
echo '没安装eslint'
exit 1
fi
PASS=true
for FILE in $STAGE_FILES
do
eslint $FILE
if [[ "$?" == 1 ]]; then
PASS=false
fi
done
if ! $PASS; then
echo "eslint检查没通过！"
exit 1
else
echo "eslint检查完毕"
fi
else
echo '没有js文件需要检查'
fi
exit 0
上述脚本写入pre-commit文件中，则在commit的时候会先执行eslint检测。
3.1 husky
相比手动写脚本并链接到钩子文件里，husky 插件可以帮助我们更简单快速地自定义钩子行为
3.1.1 安装
#npm
npm install husky --save-dev
#yarn
yarn add husky --dev
3.1.2 启用Git hooks(hooks默认是不启用的)
#npm
npx husky install
#yarn
yarn husky install
如果要自动启用，则需要如下：
npm set-script prepare "husky install"
3.1.3 创建hook
npx husky add .husky/pre-commit "npm run precommit"
// package.json
// 项目里必须配置了eslint
{
"scripts": {
"lint": "eslint --ext .js --ext .vue src",
"precommit": "npm run lint"
}
}
创建了一个pre-commit脚本，在commit的时候，"npm run precommit" 就会自动运行。
3.1.4 跳过校验
如果想要在某次commit时屏蔽husky启用的git hook，可以commit时加上Git 的-n/--no-verify 选项：
git commit -m "bypass" --no-verify
3.2 项目配置
在项目里一般需要关注代码是否有异常（error/warning）等，以及提交的信息是否符合规范。这种场景下需要关注的是pre-commit和commit-msg两个钩子。
以下内容均需在安装husky之后进行
3.2.1 pre-commit
#创建pre-commit脚本 npm run precommit是package.json里scripts内定义的指令之一
npx husky add .husky/pre-commit "npm run precommit"
3.2.1 commit-msg
commit-msg 钩子在用户键入commit message之后触发，可以用来校验提交格式。这里推荐使用commitlint来对commit message做校验。
安装
npm install -g @commitlint/cli @commitlint/config-angular
# 生成config文件。powershell下生成utf-8 LE格式文件，在运行时会报错。
# 可以手动创建commitlint.config.js文件
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
配置文件示例:
module.exports = {
extends: ['@commitlint/config-angular'],
rules: {
'type-enum': [2, 'always', ['fix', 'feat', 'docs', 'style', 'refactor', 'test', 'perf', 'chore', 'revert']],
'header-max-length': [2, 'always', 100]
}
};
更多配置可以查看官方文档
• 启用: 官方推荐和husky搭配使用
# 已经安装husky, 创建一个commit-msg钩子脚本
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
上述配置都是针对git的客户端，即该git仓库的所有开发者都需要在自己的工作台配置。
