Git Hooks:git提交时检查提交信息与代码规范

我们在使用ESLint、Prettier和git cz等工具来统一规范时,只是某种程度上约束去团队,开发者在写代码和提交代码时还是可以选择不遵守或者没有安装插件去配合使用导致最终没有完全统一,这种情况如何解决呢?

目前比较常用的方法就是使用husky(git hooks) + Lint-Staged + CommitLint等工具,在代码提交时根据项目中配置的规范进行检查,检查通过才给予提交。

安装

首先确保已经安装好ESLint、Prettier和git cz等工具,配置好相应的规范。

husky

当您提交或操作时,您可以使用它来检查提交消息运行测试检查代码

https://github.com/typicode/husky

安装

1
npm install husky --save-dev 

配置package.json文件,如下内容:

1
2
3
4
5
{
"scripts": {
"prepare": "husky install"
}
}

执行命令生成.husky目录,初始化操作:

1
npm run prepare

lint-staged

提交前对代码进行检查等操作,比如针对ESLint、Prettier等配置的规则进行代码检查

https://github.com/lint-staged/lint-staged

安装

1
npm install --save-dev lint-staged

添加lint-staged配置到package.json,相应的配置可以根据实际项目情况进行修改:

1
2
3
4
5
6
{
"lint-staged": {
"*.{ts,tsx,js,jsx,cjs,mjs,vue}": "eslint --fix",
"*.{ts,tsx,js,jsx,cjs,mjs,css,scss,less,md,vue}": "prettier --write"
}
}

执行检查:

1
npx lint-staged

为了在git提交时执行,向husky添加pre-commit钩子,以便在代码提交之前运行lint-staged检查:

1
npx husky add .husky/pre-commit "npx lint-staged" 

文件会在.husky文件夹下生成

commitlint

提交前对git提交信息进行检查

https://github.com/conventional-changelog/commitlint

安装

1
npm install --save-dev @commitlint/cli

在规则配置上可以选择官方默认的也可以使用自定义的:

官方
1
npm install --save-dev @commitlint/config-conventional 

在项目根目录添加.commitlintrc.json配置文件,配置规则模版:

1
2
3
{
"extends": ["@commitlint/config-conventional"]
}
自定义

配合cz-git在项目根目录添加.commitlintrc.json配置文件,配置规则模版例如:

规则cz-git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
{
"rules": {
"body-leading-blank": [
1,
"always"
],
"body-max-line-length": [
2,
"always",
100
],
"footer-leading-blank": [
1,
"always"
],
"footer-max-line-length": [
2,
"always",
100
],
"header-max-length": [
2,
"always",
100
],
"subject-case": [
2,
"never",
[
"sentence-case",
"start-case",
"pascal-case",
"upper-case"
]
],
"subject-empty": [
2,
"never"
],
"subject-full-stop": [
2,
"never",
"."
],
"type-case": [
2,
"always",
"lower-case"
],
"type-empty": [
2,
"never"
],
"type-enum": [
2,
"always",
[
"build",
"chore",
"ci",
"docs",
"feat",
"fix",
"perf",
"refactor",
"revert",
"style",
"test"
]
]
},
"prompt": {
"alias": {
"fd": "docs: fix typos"
},
"messages": {
"type": "选择你要提交的类型 :",
"scope": "选择一个提交范围(可选):",
"customScope": "请输入自定义的提交范围 :",
"subject": "填写简短精炼的变更描述 :\n",
"body": "填写更加详细的变更描述(可选)。使用 \"|\" 换行 :\n",
"breaking": "列举非兼容性重大的变更(可选)。使用 \"|\" 换行 :\n",
"footerPrefixesSelect": "选择关联issue前缀(可选):",
"customFooterPrefix": "输入自定义issue前缀 :",
"footer": "列举关联issue (可选) 例如: #31, #I3244 :\n",
"generatingByAI": "正在通过 AI 生成你的提交简短描述...",
"generatedSelectByAI": "选择一个 AI 生成的简短描述:",
"confirmCommit": "是否提交或修改commit ?"
},
"types": [
{
"value": "feat",
"name": "feat: 新增功能"
},
{
"value": "fix",
"name": "fix: 修复缺陷"
},
{
"value": "docs",
"name": "docs: 文档变更"
},
{
"value": "style",
"name": "style: 代码格式(不影响功能,例如空格、分号等格式修正)"
},
{
"value": "refactor",
"name": "refactor: 代码重构(不包括 bug 修复、功能新增)"
},
{
"value": "perf",
"name": "perf: 性能优化"
},
{
"value": "test",
"name": "test: 添加疏漏测试或已有测试改动"
},
{
"value": "build",
"name": "build: 构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)"
},
{
"value": "ci",
"name": "ci: 修改 CI 配置、脚本"
},
{
"value": "revert",
"name": "revert: 回滚 commit"
},
{
"value": "chore",
"name": "chore: 对构建过程或辅助工具和库的更改(不影响源文件、测试用例)"
}
],
"useEmoji": false,
"emojiAlign": "center",
"useAI": false,
"aiNumber": 1,
"themeColorCode": "",
"scopes": [],
"allowCustomScopes": true,
"allowEmptyScopes": true,
"customScopesAlign": "bottom",
"customScopesAlias": "以上都不是?我要自定义",
"emptyScopesAlias": "跳过",
"upperCaseSubject": false,
"markBreakingChangeMode": false,
"allowBreakingChanges": [
"feat",
"fix"
],
"breaklineNumber": 100,
"breaklineChar": "|",
"skipQuestions": [],
"issuePrefixes": [
{
"value": "link",
"name": "link: 链接 ISSUES 进行中"
},
{
"value": "closed",
"name": "closed: 标记 ISSUES 已完成"
}
],
"customIssuePrefixAlign": "top",
"emptyIssuePrefixAlias": "跳过",
"customIssuePrefixAlias": "自定义前缀",
"allowCustomIssuePrefix": true,
"allowEmptyIssuePrefix": true,
"confirmColorize": true,
"maxHeaderLength": null,
"maxSubjectLength": null,
"minSubjectLength": 0,
"defaultBody": "",
"defaultIssues": "",
"defaultScope": "",
"defaultSubject": ""
}
}
最后

添加commit-msg钩子,以便在代码提交之前运行commitlint检查:

1
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'