前言
本文介紹 vue3-element-admin 如何通過 Husky + Lint-staged + Commitlint + Commitizen + cz-git 來配置 Git 提交代碼規(guī)范。
核心內(nèi)容是配置 Husky 的 pre-commit 和 commit-msg 兩個(gè)鉤子:
pre-commit：Husky + Lint-staged 整合實(shí)現(xiàn) Git 提交前代碼規(guī)范檢測(cè)/格式化 (前提：ESlint + Prettier + Stylelint 代碼統(tǒng)一規(guī)范)；
commit-msg: Husky + Commitlint + Commitizen + cz-git 整合實(shí)現(xiàn)生成規(guī)范化且高度自定義的 Git commit message。
Husky
Husky 是 Git 鉤子工具，可以設(shè)置在 git 各個(gè)階段（pre-commit、commit-msg 等）觸發(fā)。
官方網(wǎng)站：https://typicode.github.io/husky
Husky 安裝有 自動(dòng)安裝 和 手動(dòng)安裝 兩種方式 。
官方推薦自動(dòng)安裝的方式，使用 husky-init 命令一次性完成依賴自動(dòng)安裝和配置
npx husky-init && npm install
自動(dòng)生成的 .husky 目錄和指令：
Lint-staged
lint-staged 是一個(gè)在 git add 到暫存區(qū)的文件運(yùn)行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交時(shí)在整個(gè)項(xiàng)目執(zhí)行。
官方網(wǎng)站：https://github.com/okonet/lint-staged
Lint-staged 安裝
npm install -D lint-staged
Lint-staged 配置
檢測(cè)/格式化配置
package.json 中添加不同文件在 git 提交執(zhí)行的 lint 檢測(cè)配置
"lint-staged": {
"*.{js,ts}": [
"eslint --fix",
"prettier --write"
],
"*.{cjs,json}": [
"prettier --write"
],
"*.{vue,html}": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,css}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
添加 lint-staged 指令
package.json 的 scripts 添加 lint-staged 指令
"scripts": {
"lint:lint-staged": "lint-staged"
}
修改提交前鉤子命令
根目錄 .husky 目錄下 pre-commit 文件中的 npm test 修改為 npm run lint:lint-staged
#npm test
npm run lint:lint-staged
Git 提交代碼檢測(cè)
Commitlint
Commitlint 檢查您的提交消息是否符合 Conventional commit format。-- Commitlint 官網(wǎng)
Commitlint 安裝
參考 官方安裝文檔
npm install -D @commitlint/cli @commitlint/config-conventional
Commitlint 配置
根目錄創(chuàng)建 commitlint.config.cjs 配置文件，示例配置： @commitlint/config-conventional
module.exports = {
// 繼承的規(guī)則
extends: ["@commitlint/config-conventional"],
// @see: https://commitlint.js.org/#/reference-rules
rules: {
"subject-case": [0], // subject大小寫不做校驗(yàn)
// 類型枚舉，git提交type必須是以下類型
"type-enum": [
2,
"always",
[
'feat', // 新增功能
'fix', // 修復(fù)缺陷
'docs', // 文檔變更
'style', // 代碼格式（不影響功能，例如空格、分號(hào)等格式修正）
'refactor', // 代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）
'perf', // 性能優(yōu)化
'test', // 添加疏漏測(cè)試或已有測(cè)試改動(dòng)
'build', // 構(gòu)建流程、外部依賴變更（如升級(jí) npm 包、修改 webpack 配置等）
'ci', // 修改 CI 配置、腳本
'revert', // 回滾 commit
'chore', // 對(duì)構(gòu)建過程或輔助工具和庫(kù)的更改（不影響源文件、測(cè)試用例）
],
],
},
};
添加提交信息校驗(yàn)鉤子
執(zhí)行下面命令生成 commint-msg 鉤子用于 git 提交信息校驗(yàn)，命令來自：@commitlint/README.md
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
生成的配置如下：
Commitlint 驗(yàn)證
正確的提交格式：<type>(<scope>): <subject> ，type 和 subject 默認(rèn)必填
| 不規(guī)范的 commit msg，提交失敗 | 規(guī)范的 commit msg，提交成功 |
|---|---|
Commitizen & cz-git
-
commitizen: 基于Node.js的
git commit命令行工具，輔助生成標(biāo)準(zhǔn)化規(guī)范化的 commit message。--官方文檔 - cz-git: 一款工程性更強(qiáng)，輕量級(jí)，高度自定義，標(biāo)準(zhǔn)輸出格式的 commitizen 適配器。--官方文檔
Commitizen & cz-git 安裝
npm install -D commitizen cz-git
cz-git 配置
修改 package.json 指定使用的適配器
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}
cz-git 與 commitlint 進(jìn)行聯(lián)動(dòng)給予校驗(yàn)信息，所以可以編寫于 commitlint 配置文件之中(? 配置模板)。
// commitlint.config.cjs
module.exports = {
rule: {
...
},
prompt: {
messages: {
type: '選擇你要提交的類型 :',
scope: '選擇一個(gè)提交范圍（可選）:',
customScope: '請(qǐng)輸入自定義的提交范圍 :',
subject: '填寫簡(jiǎn)短精煉的變更描述 :\n',
body: '填寫更加詳細(xì)的變更描述（可選）。使用 "|" 換行 :\n',
breaking: '列舉非兼容性重大的變更（可選）。使用 "|" 換行 :\n',
footerPrefixesSelect: '選擇關(guān)聯(lián)issue前綴（可選）:',
customFooterPrefix: '輸入自定義issue前綴 :',
footer: '列舉關(guān)聯(lián)issue (可選) 例如: #31, #I3244 :\n',
generatingByAI: '正在通過 AI 生成你的提交簡(jiǎn)短描述...',
generatedSelectByAI: '選擇一個(gè) AI 生成的簡(jiǎn)短描述:',
confirmCommit: '是否提交或修改commit ?',
},
// prettier-ignore
types: [
{ value: "feat", name: "特性: ? 新增功能", emoji: ":sparkles:" },
{ value: "fix", name: "修復(fù): ?? 修復(fù)缺陷", emoji: ":bug:" },
{ value: "docs", name: "文檔: ?? 文檔變更", emoji: ":memo:" },
{ value: "style", name: "格式: ?? 代碼格式（不影響功能，例如空格、分號(hào)等格式修正）", emoji: ":lipstick:" },
{ value: "refactor", name: "重構(gòu): ?? 代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）", emoji: ":recycle:" },
{ value: "perf", name: "性能: ?? 性能優(yōu)化", emoji: ":zap:" },
{ value: "test", name: "測(cè)試: ? 添加疏漏測(cè)試或已有測(cè)試改動(dòng)", emoji: ":white_check_mark:"},
{ value: "build", name: "構(gòu)建: ??? 構(gòu)建流程、外部依賴變更（如升級(jí) npm 包、修改 vite 配置等）", emoji: ":package:"},
{ value: "ci", name: "集成: ?? 修改 CI 配置、腳本", emoji: ":ferris_wheel:"},
{ value: "revert", name: "回退: ?? 回滾 commit",emoji: ":rewind:"},
{ value: "chore", name: "其他: ?? 對(duì)構(gòu)建過程或輔助工具和庫(kù)的更改（不影響源文件、測(cè)試用例）", emoji: ":hammer:"},
],
useEmoji: true,
emojiAlign: 'center',
useAI: false,
aiNumber: 1,
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
markBreakingChangeMode: false,
allowBreakingChanges: ['feat', 'fix'],
breaklineNumber: 100,
breaklineChar: '|',
skipQuestions: [],
issuePrefixes: [{ value: 'closed', name: 'closed: ISSUES has been processed' }],
customIssuePrefixAlign: 'top',
emptyIssuePrefixAlias: 'skip',
customIssuePrefixAlias: 'custom',
allowCustomIssuePrefix: true,
allowEmptyIssuePrefix: true,
confirmColorize: true,
maxHeaderLength: Infinity,
maxSubjectLength: Infinity,
minSubjectLength: 0,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: '',
}
}
添加提交指令
package.json 添加 commit 指令
"scripts": {
"commit": "git-cz"
}
cz-git 驗(yàn)證
執(zhí)行 commit 指令進(jìn)行代碼提交流程，執(zhí)行前需將改動(dòng)的文件通過 git add 添加到暫存區(qū)
npm run commit
執(zhí)行命令之后會(huì)出現(xiàn)詢問交互
根據(jù)提示一步步的完善 commit msg 信息
commit 之后 git push 推送到遠(yuǎn)程倉(cāng)庫(kù)看到提交信息效果如下：文章來源：http://www.zghlxwxcb.cn/news/detail-416413.html
項(xiàng)目源碼
完整項(xiàng)目源碼地址如下，如果有相關(guān)問題可以通過項(xiàng)目 關(guān)于我們 添加交流群。文章來源地址http://www.zghlxwxcb.cn/news/detail-416413.html
| Gitee | Github | |
|---|---|---|
| 倉(cāng)庫(kù)地址 | vue3-element-admin | vue3-element-admin |
到了這里，關(guān)于【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交規(guī)范的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
