Skip to content

Commit d0ba851

Browse files
squid-Xusquid-Xu
committed
11
1 parent e16be4c commit d0ba851

File tree

1 file changed

+310
-1
lines changed

1 file changed

+310
-1
lines changed

‎case/No4.md

+310-1
Original file line numberDiff line numberDiff line change
@@ -944,4 +944,313 @@ export default defineConfig({
944944
}
945945
}
946946
});
947-
```
947+
```
948+
949+
## Git 提交规范
950+
951+
### 配置husky+lint-staged
952+
953+
- Husky + Lint-staged 整合实现 Git 提交前代码规范检测/格式化
954+
955+
> husky 是一个 Git 钩子（Git hooks）工具，它可以在项目中植入你设定的 git hooks，在 git 提交代码的前后，你预设的 git hooks 可以得到执行，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和 git 提交出现在项目中。
956+
957+
> lint-staged 是一个专门用于在通过 git 提交代码之前，对暂存区的代码执行一系列的格式化。当 lint-staged 配合 git hooks 使用时，可以在 git 提交前的 hook 中加入 lint-staged 命令，这样就能在提交代码之前，对即将提交的代码进行格式化，成功之后就会提交代码。
958+
959+
960+
##### 安装 husky
961+
962+
- [官网](https://typicode.github.io/husky/zh/get-started.html)
963+
964+
```sh
965+
npm install --save-dev husky
966+
```
967+
968+
##### 使用 husky-init 命令一次性完成依赖自动安装和配置
969+
970+
```sh
971+
npx husky init
972+
```
973+
974+
- 自动生成的 .husky 目录和指令：
975+
976+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.sywp91kyw.webp)
977+
978+
979+
##### 安装 Lint-staged
980+
981+
982+
- [官网](https://github.com/lint-staged/lint-staged)
983+
984+
985+
```sh
986+
npm install --save-dev lint-staged
987+
```
988+
##### Lint-staged 配置
989+
990+
- package.json 中添加不同文件在 git 提交执行的 lint 检测配置
991+
992+
```js
993+
"lint-staged": {
994+
"*.{vue,ts,js}": [
995+
"eslint --fix",
996+
"prettier --write"
997+
],
998+
"*.{js,ts,json,css,scss,vue,html,md}": [
999+
"prettier --write"
1000+
]
1001+
},
1002+
```
1003+
1004+
1005+
##### 添加 lint-staged 指令
1006+
1007+
- package.json 的 scripts 添加 lint-staged 指令
1008+
1009+
```js
1010+
"scripts": {
1011+
"lint:lint-staged": "lint-staged"
1012+
}
1013+
```
1014+
1015+
##### 修改提交前钩子命令
1016+
1017+
- 根目录 .husky 目录下 pre-commit 文件中的 npm test 修改为 npm run lint:lint-staged
1018+
1019+
```js
1020+
#npm test
1021+
npm run lint:lint-staged
1022+
```
1023+
1024+
##### Git 提交代码检测
1025+
1026+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.2yybb16omb.webp)
1027+
1028+
1029+
### 配置Commitlint
1030+
1031+
- Husky + Commitlint + Commitizen + cz-git 整合实现生成规范化且高度自定义的 Git commit message。
1032+
1033+
1034+
##### Commitlint 安装
1035+
1036+
- [官方安装文档](https://commitlint.js.org/guides/getting-started.html)
1037+
1038+
```sh
1039+
npm install --save-dev @commitlint/config-conventional @commitlint/cli
1040+
```
1041+
1042+
##### Commitlint 配置
1043+
1044+
- 根目录创建 commitlint.config.js 配置文件
1045+
1046+
```js
1047+
export default {
1048+
// 继承的规则
1049+
extends: ['@commitlint/config-conventional'],
1050+
// @see: https://commitlint.js.org/#/reference-rules
1051+
rules: {
1052+
'subject-case': [0], // subject大小写不做校验
1053+
1054+
// 类型枚举，git提交type必须是以下类型
1055+
'type-enum': [
1056+
2,
1057+
'always',
1058+
[
1059+
'feat', // 新增功能
1060+
'fix', // 修复缺陷
1061+
'docs', // 文档变更
1062+
'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
1063+
'refactor', // 代码重构（不包括 bug 修复、功能新增）
1064+
'perf', // 性能优化
1065+
'test', // 添加疏漏测试或已有测试改动
1066+
'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
1067+
'ci', // 修改 CI 配置、脚本
1068+
'revert', // 回滚 commit
1069+
'chore' // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
1070+
]
1071+
]
1072+
}
1073+
};
1074+
```
1075+
1076+
##### 添加提交信息校验钩子
1077+
1078+
- 执行下面命令生成 commint-msg 钩子用于 git 提交信息校验
1079+
1080+
```sh
1081+
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
1082+
```
1083+
1084+
##### 生成的配置如下：
1085+
1086+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.2yybb25mlz.webp)
1087+
1088+
::: danger 提示
1089+
- 我在git commit时，发生了以下错误：
1090+
1091+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.70aaph79xx.webp)
1092+
1093+
```js
1094+
.husky/commit-msg: .husky/commit-msg: cannot execute binary file
1095+
husky - commit-msg script failed (code 126)
1096+
```
1097+
- 解决办法：
1098+
> 右下角文件编码那里，你的commit-msg默认是utf-16，改成utf-8就可以了。错误信息有告诉你无法执行binary文件，一般这种错误都跟编码有关
1099+
:::
1100+
1101+
##### Commitlint 验证
1102+
1103+
- 正确的提交格式：`<type>(<scope>): <subject>` ，type 和 subject 默认必填
1104+
1105+
| 不规范的 commit msg，提交失败 | 规范的 commit msg，提交成功 |
1106+
| ------------- | :-----------: |
1107+
| ![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.8ojnmny4va.webp) | ![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.175cg6pd4n.webp) |
1108+
1109+
1110+
### Commitizen & cz-git
1111+
1112+
- [commitizen官方文档](https://github.com/commitizen/cz-cli)
1113+
> commitizen: 基于Node.js的 git commit 命令行工具，辅助生成标准化规范化的 commit message
1114+
1115+
- [cz-git官方文档](https://cz-git.qbb.sh/zh/)
1116+
> cz-git: 一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器
1117+
1118+
1119+
##### Commitizen & cz-git 安装
1120+
1121+
```sh
1122+
npm install -D commitizen cz-git
1123+
```
1124+
1125+
##### cz-git 配置
1126+
1127+
- 修改 package.json 指定使用的适配器
1128+
1129+
```js
1130+
"config": {
1131+
"commitizen": {
1132+
"path": "node_modules/cz-git"
1133+
}
1134+
}
1135+
```
1136+
1137+
##### cz-git 与 commitlint 进行联动给予校验信息
1138+
1139+
```js
1140+
export default {
1141+
// 继承的规则
1142+
extends: ['@commitlint/config-conventional'],
1143+
// @see: https://commitlint.js.org/#/reference-rules
1144+
rules: {
1145+
'subject-case': [0], // subject大小写不做校验
1146+
1147+
// 类型枚举，git提交type必须是以下类型
1148+
'type-enum': [
1149+
2,
1150+
'always',
1151+
[
1152+
'feat', // 新增功能
1153+
'fix', // 修复缺陷
1154+
'docs', // 文档变更
1155+
'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
1156+
'refactor', // 代码重构（不包括 bug 修复、功能新增）
1157+
'perf', // 性能优化
1158+
'test', // 添加疏漏测试或已有测试改动
1159+
'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
1160+
'ci', // 修改 CI 配置、脚本
1161+
'revert', // 回滚 commit
1162+
'chore' // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
1163+
]
1164+
]
1165+
},
1166+
// 以下为新增内容
1167+
prompt: {
1168+
messages: {
1169+
type: '选择你要提交的类型 :',
1170+
scope: '选择一个提交范围（可选）:',
1171+
customScope: '请输入自定义的提交范围 :',
1172+
subject: '填写简短精炼的变更描述 :\n',
1173+
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
1174+
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
1175+
footerPrefixesSelect: '选择关联issue前缀（可选）:',
1176+
customFooterPrefix: '输入自定义issue前缀 :',
1177+
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
1178+
generatingByAI: '正在通过 AI 生成你的提交简短描述...',
1179+
generatedSelectByAI: '选择一个 AI 生成的简短描述:',
1180+
confirmCommit: '是否提交或修改commit ?'
1181+
},
1182+
// prettier-ignore
1183+
types: [
1184+
{ value: "feat", name: "特性: ✨ 新增功能", emoji: ":sparkles:" },
1185+
{ value: "fix", name: "修复: 🐛 修复缺陷", emoji: ":bug:" },
1186+
{ value: "docs", name: "文档: 📝 文档变更", emoji: ":memo:" },
1187+
{ value: "style", name: "格式: 💄 代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
1188+
{ value: "refactor", name: "重构: ♻️ 代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" },
1189+
{ value: "perf", name: "性能: ⚡️ 性能优化", emoji: ":zap:" },
1190+
{ value: "test", name: "测试: ✅ 添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"},
1191+
{ value: "build", name: "构建: 📦️ 构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"},
1192+
{ value: "ci", name: "集成: 🎡 修改 CI 配置、脚本", emoji: ":ferris_wheel:"},
1193+
{ value: "revert", name: "回退: ⏪️ 回滚 commit",emoji: ":rewind:"},
1194+
{ value: "chore", name: "其他: 🔨 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"},
1195+
],
1196+
useEmoji: true,
1197+
emojiAlign: 'center',
1198+
useAI: false,
1199+
aiNumber: 1,
1200+
themeColorCode: '',
1201+
scopes: [],
1202+
allowCustomScopes: true,
1203+
allowEmptyScopes: true,
1204+
customScopesAlign: 'bottom',
1205+
customScopesAlias: 'custom',
1206+
emptyScopesAlias: 'empty',
1207+
upperCaseSubject: false,
1208+
markBreakingChangeMode: false,
1209+
allowBreakingChanges: ['feat', 'fix'],
1210+
breaklineNumber: 100,
1211+
breaklineChar: '|',
1212+
skipQuestions: [],
1213+
issuePrefixes: [{ value: 'closed', name: 'closed: ISSUES has been processed' }],
1214+
customIssuePrefixAlign: 'top',
1215+
emptyIssuePrefixAlias: 'skip',
1216+
customIssuePrefixAlias: 'custom',
1217+
allowCustomIssuePrefix: true,
1218+
allowEmptyIssuePrefix: true,
1219+
confirmColorize: true,
1220+
maxHeaderLength: Infinity,
1221+
maxSubjectLength: Infinity,
1222+
minSubjectLength: 0,
1223+
scopeOverrides: undefined,
1224+
defaultBody: '',
1225+
defaultIssues: '',
1226+
defaultScope: '',
1227+
defaultSubject: ''
1228+
}
1229+
};
1230+
```
1231+
1232+
##### 添加提交指令
1233+
1234+
- package.json 添加 commit 指令
1235+
1236+
```js
1237+
"scripts": {
1238+
"commit": "git-cz"
1239+
}
1240+
```
1241+
1242+
##### cz-git 验证
1243+
1244+
- 执行 commit 指令进行代码提交流程，执行前需将改动的文件通过 git add 添加到暂存区
1245+
1246+
```sh
1247+
npm run commit
1248+
```
1249+
1250+
- 执行命令之后会出现询问交互
1251+
1252+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.6f0n3776uz.webp)
1253+
1254+
- 根据提示一步步的完善 commit msg 信息
1255+
1256+
![image](https://github.com/squid-Xu/picx-images-hosting/raw/master/20240918/image.175cg834fa.webp)

0 commit comments

Comments
 (0)