背景
git提交信息应该包括明确的清晰明了,有分类; 但是团队小伙伴在提交的时候为了图方便,大多都只是简单写一下,开发一时爽,维护火葬场;
一、使用git cz进行commit选项选择后再提交
// 安装 commitizen
npm i commitizen -g
// 使用 git cz 命令
git cz
使用 git cz
代替 git commit
,出现以下commit选项
二、自定义团队提交规范
使用 cz-customizable
自定义提交规范
-
使用命令
npm cz-customizable --save-dev
安装 -
在
package.json
中新增"config": { "commitizen": { "path":"node_modules/cz-customizable" } }
-
在根目录中创建
.cz-config.js
文件'use strict'; module.exports = { types: [ { value: '✨特性', name: '特性: 一个新的特性' }, { value: '🐛修复', name: '修复: 修复一个Bug' }, { value: '📝文档', name: '文档: 变更的只有文档' }, { value: '💄格式', name: '格式: 空格, 分号等格式修复' }, { value: '♻️重构', name: '重构: 代码重构,注意和特性、修复区分开' }, { value: '⚡️性能', name: '性能: 提升性能' }, { value: '✅测试', name: '测试: 添加一个测试' }, { value: '🔧工具', name: '工具: 开发工具变动(构建、脚手架工具等)' }, { value: '⏪回滚', name: '回滚: 代码回退' }], messages: { type: '请选择提交的类型;', customScope: '请输入修改的范围(可选)', subject: '请简要描述提交(必填)', body: '请输入详细描述(可选)', footer: '请选择要关闭的issue(可选)', confirmCommit: '确认要使用以上信息提交?(y/n)' }, // limit subject length subjectLimit: 100 };
-
再次执行
git cz
即可见到我们自己配置的规范,如下图
三、使用husky,在git hooks中增加提交选项
通过上面的步骤,我们已经可以通过 git cz
去规范commit了;但是还存在以下两个问题:
- commitizen必须全局安装,否则不能使用该命令
- 使用常规的
git commit -m xx
不能拦截,需要强制使用git cz
命令
此时我们可以通过安装husky,在git的hooks中拦截git commit
的动作
-
安装husky
npm install husky --save-dev
-
在
package.json
中新增命令行"scripts": { "prepare": "npx husky install", }
-
执行
npm run prepare
-
执行命令
npx husky add .husky/pre-commit
生成该hook的文件 -
编辑根目录下
.husky
文件夹下的pre-commit
. "$(dirname "$0")/_/husky.sh" // 注意:必须有exec < /dev/tty,代表执行命令行 exec < /dev/tty && git cz --hook || true
至此,我们使用 git commit
也可以进行提交规范的约束了
四、使用lint-staged, 对暂存区代码进行eslint校验和prettier格式化
现在我们已经约束了提交规范,但是我们希望在提交前对当前的代码进行格式验证和修复,此时需要使用到lint-staged
-
安装
npm i lint-staged --save-dev
-
在
package.json
中新增配置"lint-staged": { "**/*.scss": "stylelint --syntax scss", "**/*.{js,jsx, tsx,ts }": "npm run lint-staged:js", "**/*.{js,jsx,tsx,ts,less,scss,md,json}": [ "prettier --write" ] }
-
在
package.json
中新增lint-staged
和lint-staged.js
命令"scripts": { "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx " }
-
最后在
pre-commit
中新增脚本npm run lint-staged
本次暂时未添加 commitlint
,如需配置可以参考 这篇文章
好了,我们现在已经完成所有所有提交规范的操作,小伙伴也可以开心的进行commit提交啦!