持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
2.4 代码提交检查
在团队协作开发时，每个人提交代码时都会写 commit message，但如果没有规范，每个人都会有自己的书写风格，因此在翻看 git log 时经常看到的是五花八门，十分不利于阅读和维护。
做一些配置来约束团队成员在写提交信息时规范统一。
需要用的开发依赖：
- husky
- lint-staged
- commitlint
- commitizen
2.4.1 安装 husky
husky 这个工具用于配置 git 文件提交时触发的钩子
pnpm install husky --save-dev
几个常用的钩子：
- pre-commit 描述: 通过钩子函数,判断提交的代码是否符合规范
- commit-msg 描述: 通过钩子函数,判断 commit 信息是否符合规范
- pre-push 描述: 通过钩子,执行测试,避免对以前的内容造成影响
2.4.2 lint-staged
对暂存的 git 文件运行测试器, 在执行 git add 命令时会按照我们配置的代码风格格式化代码
pnpm install --save-dev lint-staged
在package.json文件中添加如下代码:
{
"name": "project name",
"version": "1.1.0",
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
}
在package.json中添加脚本
npm set-script prepare "husky install"
初始化husky ( 将 git hooks 钩子交由 husky 执行), 在终端中执行命令：
npm run prepare
-
添加Hook：pre-commit
每次提交都会执行代码检查（
lint-staged）,检查规则以及格式化规则在package.json中的lint-staged配置项中npx husky add .husky/pre-commit "npx lint-staged"
-
安装提交信息校验依赖
pnpm install --save-dev @commitlint/cli @commitlint/config-conventional
-
添加Git Hook:commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
2.4.3 conventional-changelog-cli 与 commitizen
从git元生成一个变更日志
pnpm install --save-dev conventional-changelog-cli
# package.json 的 script 中添加命令
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
执行 npm run log 生成日志文件CHANGELOG.md.
commitizen 的作用将会体现在你提交代码时提供给你选项
2.4.4 效果
暂存文件，提交代码，然后钩子就会检查我们的代码了。
PS D:\TLProjects\xxx-studio\code\xxx-manage-vue> git add .
PS D:\TLProjects\xxx-studio\code\xxx-manage-vue> git commit -m "审批按钮添加loading"
> xxx-vue@0.0.4 lint:lint-staged D:\TLProjects\xxx-studio\code\xxx-manage-vue
> lint-staged
[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 2 files
[STARTED] *.{js,jsx,ts,tsx} — 0 file
[STARTED] {!(package)*.json,*.code-snippets,.!(browserslist)*rc} — 0 file
[STARTED] package.json — 0 file
[STARTED] *.vue — 2 files
[STARTED] *.{scss,less,styl,html} — 0 file
[STARTED] *.md — 0 file
[SKIPPED] *.{js,jsx,ts,tsx} — no files
[SKIPPED] {!(package)*.json,*.code-snippets,.!(browserslist)*rc} — no files
[SKIPPED] package.json — no files
[SKIPPED] *.{scss,less,styl,html} — no files
[SKIPPED] *.md — no files
[STARTED] eslint --fix
[SUCCESS] eslint --fix
[STARTED] prettier --write
[SUCCESS] prettier --write
[STARTED] stylelint --fix
[SUCCESS] stylelint --fix
[SUCCESS] *.vue — 2 files
[SUCCESS] package.json — 2 files
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SUCCESS] Applying modifications from tasks...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...
⧗ input: 审批按钮添加loading
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
可以看到这里报错了，2个问题，提交的主题，以及类型不能为空，更改提交信息为：
git commit -m "feat:审批按钮添加loading"
可以看到提交成功了：
