今天來(lái)看看如何使用 commitlint + Husky 在 git commit 時(shí)規(guī)范提交信息!

1. 基本概述

在多人協(xié)同的團(tuán)隊(duì)中，規(guī)范化的提交信息更易讀，便于查找。每個(gè)人的 git commit 的信息不一樣，沒(méi)有一個(gè)機(jī)制就很難保證規(guī)范化。而 commitlint 就可以幫助我們解決這個(gè)問(wèn)題。Commitlint 是一個(gè)自動(dòng)化工具，它可以用來(lái)檢查提交約定，如果提交不符合規(guī)范，則會(huì)拒絕該提交。當(dāng)然，這些規(guī)則是可以配置的。

使用 commitlint 的優(yōu)點(diǎn)：

• 自動(dòng)變更日志：由于遵循標(biāo)準(zhǔn)約定的提交，可以使用standard-version 等工具自動(dòng)生成變更日志;
• 更好的理解提交：具有特定類(lèi)型和范圍的提交將幫助我們了解提交更改了哪些代碼;
• 遵守特定約定：多人協(xié)作的的大項(xiàng)目中，commitlint 可以阻止不規(guī)范的提交，以便提交遵守定義的約定。

Git 允許開(kāi)發(fā)人員在觸發(fā)特定事件時(shí)執(zhí)行一些操作，它被稱(chēng)為git hook。我們可以在git工作流程的很多階段執(zhí)行操作，例如：

• pre-commit
• pre-push
• pre-rebase
• post-update

然而，這需要在本地的 .git 文件中配置的，因此在默認(rèn)情況下，每個(gè)開(kāi)發(fā)人員都需要安裝需要的 hook，這樣才能執(zhí)行特定的檢查。幸運(yùn)的是，Husky 可以幫助我們解決這個(gè)問(wèn)題，husky 可以讓我們?cè)陧?xiàng)目中方便添加 git hooks。Husky 不僅可以用于強(qiáng)制執(zhí)行提交約定，還可以在提交時(shí)運(yùn)行靜態(tài)代碼分析、測(cè)試、自動(dòng)代碼格式化等。

因此我們可以使用Husky和commitlint來(lái)檢查提交信息是否符合提交規(guī)范。

2. 安裝配置

由于 Commitlint 使用了 Husky，我們需要先安裝它。Husky 是作為開(kāi)發(fā)依賴(lài)項(xiàng)提供的，因此它僅在本地使用，不會(huì)與生產(chǎn)代碼捆綁在一起。在終端中執(zhí)行以下命令來(lái)安裝Husky：

// 使用npm安裝
npm install --save-dev husky

// 使用yarn安裝
yarn add husky --dev

現(xiàn)在我們需要定義一個(gè) Hook 來(lái)檢查提交信息，這個(gè) hook 叫做 commit-msg，需要在 package.json 中定義：

"husky": {
  "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

或者，我們也可以項(xiàng)目的根目錄定義一個(gè).huskyrc配置文件，在這個(gè)配置文件中單獨(dú)定義 Husky 配置：

{
  "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

這段代碼就告訴git hooks，當(dāng)我們執(zhí)行 git commit -m 'message' 時(shí)將觸發(fā)commit-msg 事件鉤子并通知 husky，從而執(zhí)行 commitlint -e $GIT_PARAMS命令。該命令會(huì)讀取commitlint.config.js 配置的規(guī)則并對(duì)提交的信息進(jìn)行校驗(yàn)，若校驗(yàn)不通過(guò)，就會(huì)在終端中輸出錯(cuò)誤，commit 被終止。

有了 Husky，接下來(lái)就需要安裝 Commitlint CLI，它將由 Husky hook 執(zhí)行以驗(yàn)證提交消息：

// 使用npm安裝
npm install --save-dev @commitlint/cli

// 使用yarn安裝
yarn add @commitlint/cli --dev

Commitlint 只是用于檢查提交消息是否符合規(guī)范的工具。所以，我們還需要一個(gè)提交規(guī)范。這個(gè)配置是完全可以自定義的，當(dāng)然，Commitlint 提供了當(dāng)前支持的配置之外的一些配置：

• @commitlint/config-conventional
• @commitlint/config-lerna-scopes
• @commitlint/config-patternplate
• @commitlint/config-angular
• @commitlint/config-angular-type-enum

Commitlint 推薦使用 config-conventional 配置去規(guī)范 commit，安裝命令如下：

// 使用npm安裝
npm install --save-dev @commitlint/config-conventional

// 使用yarn安裝
yarn add @commitlint/config-conventional --dev

最后一步，我們需要?jiǎng)?chuàng)建一個(gè) Commitlint 配置文件，在文件中可以定義需要使用的配置，也就是上面剛安裝的配置規(guī)范。只需要在項(xiàng)目的根目錄創(chuàng)建一個(gè)名為commitlint.config.js的規(guī)范：

module.exports = {
    extends: ['@commitlint/config-conventional'],
};

到這里就完成了 Husky 和 Commitlint 的安裝和配置。其執(zhí)行流程如下：

3. 提交規(guī)范

Commitlint 推薦使用 config-conventional 配置，它的提交格式如下：

git commit -m <type>[optional scope]: <description>

這里面有三個(gè)參數(shù)：

• type：必須，表示提交的改動(dòng)類(lèi)型;
• optional scope：可選，表示提交的修改范圍，需要使用括號(hào)包裹;
• description：必須，表示提交的內(nèi)容描述。

常見(jiàn)的 type 類(lèi)型如下：

• build: 影響構(gòu)建組件的更改，如構(gòu)建工具、依賴(lài)項(xiàng)、項(xiàng)目版本等;
• chore: 比如構(gòu)建流程、輔助工具等的更改。
• ci: 持續(xù)集成的更改;
• docs: 影響文檔的更改。
• feat: 引入新功能的更改。
• fix: 修補(bǔ)錯(cuò)誤的更改。
• perf: 優(yōu)化相關(guān)，比如提升性能、體驗(yàn)。
• refactor: 代碼重構(gòu)的更改。
• revert: 還原先前提交的更改。
• style: 代碼格式的更改(空格、格式、缺少分號(hào)等)。
• test: 添加缺失測(cè)試或糾正現(xiàn)有測(cè)試的更改。

例如：

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'feat(xx模塊): 增加 yyy 功能'
git commit -m 'fix: 修復(fù) xxx 問(wèn)題'

下面是一個(gè)git提交信息的例子：

下面來(lái)看看config-conventional 配置是如何定義的：

module.exports = {
 parserPreset: 'conventional-changelog-conventionalcommits',
 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],
  'scope-case': [2, 'always', 'lower-case'],
  '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',
   ],
  ],
 },
};

這里面包含了很多配置項(xiàng)，這些配置項(xiàng)由配置名和配置數(shù)組組成，數(shù)組的第一個(gè)元素是level，可選值0、1、2，0為disable，1為warning，2為error，第二個(gè)元素為是否應(yīng)用與否，可選值always、never，第三個(gè)元素是配置規(guī)則。

上面是config-conventional的默認(rèn)規(guī)則，我們可以在 commitlint.config.js 配置文件中覆蓋這些規(guī)則：

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
      'scope-case': [0, 'never'],
      'header-max-length': [0, 'always', 120]
    }
};