【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交規范

前言

本文介紹 vue3-element-admin 如何通過 Husky + Lint-staged + Commitlint + Commitizen + cz-git 來配置 Git 提交代碼規范，

核心內容是配置 Husky 的 pre-commit 和 commit-msg 兩個鉤子:

pre-commit：Husky + Lint-staged 整合實作 Git 提交前代碼規范檢測/格式化 (前提：ESlint + Prettier + Stylelint 代碼統一規范)；

commit-msg: Husky + Commitlint + Commitizen + cz-git 整合實作生成規范化且高度自定義的 Git commit message，

Husky

Husky 是 Git 鉤子工具，可以設定在 git 各個階段（pre-commit、commit-msg 等）觸發，

官方網站：https://typicode.github.io/husky

Husky 安裝有 自動安裝 和 手動安裝 兩種方式 ，

官方推薦自動安裝的方式，使用 husky-init 命令一次性完成依賴自動安裝和配置

npx husky-init && npm install

自動生成的 .husky 目錄和指令：

Lint-staged

lint-staged 是一個在 git add 到暫存區的檔案運行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交時在整個專案執行，

官方網站：https://github.com/okonet/lint-staged

Lint-staged 安裝

npm install -D lint-staged

Lint-staged 配置

檢測/格式化配置

package.json 中添加不同檔案在 git 提交執行的 lint 檢測配置

"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 提交代碼檢測

Commitlint

Commitlint 檢查您的提交訊息是否符合 Conventional commit format，-- Commitlint 官網

Commitlint 安裝

參考 官方安裝檔案

npm install -D @commitlint/cli @commitlint/config-conventional

Commitlint 配置

根目錄創建 commitlint.config.cjs 組態檔，示例配置： @commitlint/config-conventional

module.exports = {
  // 繼承的規則
  extends: ["@commitlint/config-conventional"],
  // @see: https://commitlint.js.org/#/reference-rules
  rules: {
    "subject-case": [0], // subject大小寫不做校驗

    // 型別列舉，git提交type必須是以下型別
    "type-enum": [
      2,
      "always",
      [
    'feat', // 新增功能
        'fix', // 修復缺陷
        'docs', // 檔案變更
        'style', // 代碼格式（不影響功能，例如空格、分號等格式修正）
        'refactor', // 代碼重構（不包括 bug 修復、功能新增）
        'perf', // 性能優化
        'test', // 添加疏漏測驗或已有測驗改動
        'build', // 構建流程、外部依賴變更（如升級 npm 包、修改 webpack 配置等）
        'ci', // 修改 CI 配置、腳本
        'revert', // 回滾 commit
        'chore', // 對構建程序或輔助工具和庫的更改（不影響源檔案、測驗用例）
      ],
    ],
  },
};

添加提交資訊校驗鉤子

執行下面命令生成 commint-msg 鉤子用于 git 提交資訊校驗，命令來自：@commitlint/README.md

npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

生成的配置如下：

Commitlint 驗證

正確的提交格式：<type>(<scope>): <subject> ，type 和 subject 默認必填

不規范的 commit msg，提交失敗	規范的 commit msg，提交成功

Commitizen & cz-git

• commitizen: 基于Node.js的 git commit 命令列工具，輔助生成標準化規范化的 commit message，--官方檔案
• cz-git: 一款工程性更強，輕量級，高度自定義，標準輸出格式的 commitizen 配接器，--官方檔案

Commitizen & cz-git 安裝

npm install -D commitizen cz-git

cz-git 配置

修改 package.json 指定使用的配接器

 "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }

cz-git 與 commitlint 進行聯動給予校驗資訊，所以可以撰寫于 commitlint 組態檔之中(? 配置模板)，

// commitlint.config.cjs
module.exports = {
  rule: {
    ...
  },
  prompt: {
  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 ?',
    },
    // prettier-ignore
    types: [
      { value: "feat",     name: "特性:     ?  新增功能", emoji: ":sparkles:" },
      { value: "fix",      name: "修復:     ??  修復缺陷", emoji: ":bug:" },
      { value: "docs",     name: "檔案:     ??  檔案變更", emoji: ":memo:" },
      { value: "style",    name: "格式:     ??  代碼格式（不影響功能，例如空格、分號等格式修正）", emoji: ":lipstick:" },
      { value: "refactor", name: "重構:     ??  代碼重構（不包括 bug 修復、功能新增）", emoji: ":recycle:" },
      { value: "perf",     name: "性能:     ??  性能優化", emoji: ":zap:" },
      { value: "test",     name: "測驗:     ?  添加疏漏測驗或已有測驗改動", emoji: ":white_check_mark:"},
      { value: "build",    name: "構建:     ???  構建流程、外部依賴變更（如升級 npm 包、修改 vite 配置等）", emoji: ":package:"},
      { value: "ci",       name: "集成:     ??  修改 CI 配置、腳本",  emoji: ":ferris_wheel:"},
      { value: "revert",   name: "回退:     ??  回滾 commit",emoji: ":rewind:"},
      { value: "chore",    name: "其他:     ??  對構建程序或輔助工具和庫的更改（不影響源檔案、測驗用例）", 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 驗證

執行 commit 指令進行代碼提交流程，執行前需將改動的檔案通過 git add 添加到暫存區

npm run commit

執行命令之后會出現詢問互動

根據提示一步步的完善 commit msg 資訊

commit 之后 git push 推送到遠程倉庫看到提交資訊效果如下：

專案原始碼

完整專案原始碼地址如下，如果有相關問題可以通過專案 關于我們 添加交流群，

標籤：其他

上一篇：放棄 console.log 吧！用 Debugger 你能讀懂各種原始碼

下一篇：生產事故-走近科學之消失的JWT