一、準(zhǔn)備環(huán)境

node：v22.11.0
yarn：1.22.22
npm ：10.9.0
react：18.3.1
react-dom： 18.3.1
typescript： 4.9.5

二、安裝依賴

yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional -D
// 安裝后的依賴版本：
// husky：9.1.7
// lint-staged：15.4.3
// @commitlint/cli：19.7.1
// @commitlint/config-conventional：19.7.1

1. Husky

Husky是 Git 鉤子工具，可以設(shè)置在 git 各個(gè)階段（pre-commit、commit-msg 等）觸發(fā)。

2. lint-staged

lint-staged是一個(gè)在 git add 到暫存區(qū)的文件運(yùn)行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交時(shí)在整個(gè)項(xiàng)目執(zhí)行。lint-staged 可以讓你當(dāng)前的代碼檢查 只檢查本次修改更新的代碼，并在出現(xiàn)錯(cuò)誤的時(shí)候，自動(dòng)修復(fù)并且推送。

3. Commitlint

Commitlint檢查你的提交消息是否符合常規(guī)的提交格式

• @commitlint/cli 是一個(gè)命令行工具，用于校驗(yàn) Git 提交信息是否符合規(guī)范
• @commitlint/config-conventional 是一種標(biāo)準(zhǔn)化的提交規(guī)范，基于Angular的提交規(guī)范

三、配置lint-staged規(guī)范

// package.json
{
  ...
  "scripts": {
    ...
   "prepare": "husky",
    "lint-staged": "git add .&&npx lint-staged"
  },
"lint-staged": {
    "*": [
      "yarn lint:fix",
      "yarn format"
    ],
  },
}

四、husky配置

1. 生成husky配置文件

npx husky init
// 執(zhí)行命令后，自動(dòng)生成的 .husky 目錄和指令：

2. pre-commit鉤子配置

修改提交前鉤子命令.husky/pre-commit
該文件之前執(zhí)行npx husky init時(shí)候就會(huì)自動(dòng)生成

yarn lint-staged

3. commit-msg鉤子配置

添加提交信息校驗(yàn)的鉤子文件： .husky/commit-msg，內(nèi)容為：

npx --no -- commitlint --edit "$1"

五、Commitlint 配置

根目錄下創(chuàng)建 commitlint.config.js 配置文件
注意：確保保存為 UTF-8 的編碼格式，否則可能會(huì)出現(xiàn)錯(cuò)誤。
配置內(nèi)容為：

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': [
      // 當(dāng)前驗(yàn)證的錯(cuò)誤級別
      2,
      // 在什么情況下進(jìn)行驗(yàn)證，always表示一直進(jìn)行驗(yàn)證
      'always',
      [
        'feat', // 新增功能
        'fix', // 修復(fù)缺陷
        'docs', // 文檔變更
        'style', // 代碼格式（不影響功能，例如空格、分號等格式修正）
        'refactor', // 代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）
        'perf', // 性能優(yōu)化
        'test', // 添加疏漏測試或已有測試改動(dòng)
        'build', // 構(gòu)建流程、外部依賴變更（如升級 npm 包、修改 webpack 配置等）
        'ci', // 修改 CI 配置、腳本
        'revert', // 回滾 commit
        'chore', // 對構(gòu)建過程或輔助工具和庫的更改（不影響源文件、測試用例）
      ],
    ],
  },
};

六、測試提交

git commit -m "不規(guī)范的提交" // 沒有g(shù)it類型
git commit -m "build:不規(guī)范的提交" // 冒號后面需要有空格
git commit -m "build: 規(guī)范的提交" // git類型+英文格式冒號+空格+提交描述

七、cz-git命令工具添加（可選）

cz-git一款git commit 統(tǒng)一規(guī)范的工具(用git cz替代git commit '' )

1、全局安裝Commitizen

npm install -g commitizen

2、cz-git 依賴安裝

yarn add -D cz-git
// 安裝后的依賴版本：
// cz-git：1.11.0

3、配置

1.修改 package.json 添加 config 指定使用的適配器

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

2.修改 commitlint.config.js 添加 prompt 配置

// commitlint.config.js
module.exports = {
  rule: {
    ...
  },
  prompt: {
  messages: {
      type: '選擇你要提交的類型 :',
      scope: '選擇一個(gè)提交范圍（可選）:',
      customScope: '請輸入自定義的提交范圍 :',
      subject: '填寫簡短精煉的變更描述 :\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 生成你的提交簡短描述...',
      generatedSelectByAI: '選擇一個(gè) AI 生成的簡短描述:',
      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: "格式:     ??  代碼格式（不影響功能，例如空格、分號等格式修正）", emoji: ":lipstick:" },
      { value: "refactor", name: "重構(gòu):     ??  代碼重構(gòu)（不包括 bug 修復(fù)、功能新增）", emoji: ":recycle:" },
      { value: "perf",     name: "性能:     ??  性能優(yōu)化", emoji: ":zap:" },
      { value: "test",     name: "測試:     ?  添加疏漏測試或已有測試改動(dòng)", emoji: ":white_check_mark:"},
      { value: "build",    name: "構(gòu)建:     ???  構(gòu)建流程、外部依賴變更（如升級 npm 包、修改 vite 配置等）", emoji: ":package:"},
      { value: "ci",       name: "集成:     ??  修改 CI 配置、腳本",  emoji: ":ferris_wheel:"},
      { value: "revert",   name: "回退:     ??  回滾 commit",emoji: ":rewind:"},
      { value: "chore",    name: "其他:     ??  對構(gòu)建過程或輔助工具和庫的更改（不影響源文件、測試用例）", 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: '',
  }
}

3.cz-git 驗(yàn)證

執(zhí)行前需將改動(dòng)的文件通過 git add 添加到暫存區(qū)

git cz

執(zhí)行命令之后會(huì)出現(xiàn)詢問交互，根據(jù)提示一步步的完善 commit msg 信息

八、參考

husky參考1：https://blog.csdn.net/weixin_51799004/article/details/138308098