Git 的學與記：工程化配置 commit 規範

GitHub 原文地址， 感謝 Star：github.com/wenkanglin/…

使用版本說明：

• git: 2.19.0
• @commitlint/cli: 7.2.1
• @commitlint/config-conventional 7.1.2
• @commitlint/prompt 7.2.1
• @commitlint/prompt-cli 7.2.1
• cz-conventional-changelog 2.1.0
• husky 1.1.3
• lint-staged 8.0.4

若是你團隊的 git commit 信息紊亂，太過糟糕，以爲有必要統一規範 commit 格式，又或者你是一個強迫症患者，有必要讓 commit 信息整整齊齊的展現。那麼，你能夠往下瞄瞄。

---

git commit 規範格式

以我多年捉急的經驗，比較大衆化的 commit 格式無非有兩種：

$ <commit-type>[(commit-scope)]: <commit-message>
$ <commit-icon>: <commit-message>
複製代碼

• <commit-type> 常見爲：
  • chore：構建配置相關。
  • docs：文檔相關。
  • feat：添加新功能。
  • fix：修復 bug。
  • pref：性能相關。
  • refactor：代碼重構，通常若是不是其餘類型的 commit，均可以歸爲重構。
  • revert：分支回溯。
  • style：樣式相關。
  • test：測試相關。
• [(commit-scope)] 可選，表示範圍，例如：refactor(cli)，表示關於 cli 部分的代碼重構。
• <commit-message> 提交記錄的信息，有些規範可能會要求首字母大寫。
• <commit-icon> 用圖標來替代 <commit-type> 所表示的功能。

因此，你可能常常能夠在 GitHub 上看到相似下面的 commit 格式信息：

feat: add a new feature xxx
fix: fix issue xxx
refactor: rewrite the code of xxx
fix(testing): correct testing code of xxx
 # 有些 commit 信息首字母會大寫
feat: Add a new feature xxx
fix: Fix issue xxx
refactor: Rewrite the code of xxx
fix(testing): Correct testing code of xxx
 # 有些使用 icon 來替代 commit 類型
:sparkles: Add a new feature
:bug: Fix issue xxx
:recycle: Rewrite the code of xxx
複製代碼

用於 commit 規範的工具

偷偷的展現一些個人收藏：

• commitizen
• commitlint
• gitmoji

第三種是使用 <commit-icon> 來展現信息，接下來我會介紹第一種和第二種的使用方式，怎麼使用來讓咱們感受到舒舒服服地。

commitizen 使用

根據官方文檔的介紹，嘗試全局安裝下面的包：

yarn global add commitizen # npm install -g commitizen
複製代碼

成功後，能夠在 git 項目中全局使用 git-cz 命令，或者 git cz，可能會出現以下圖所示：

注意這裏是有可能，我的經歷，有可能很差使，由於可能不是一個 a Commitizen friendly repository （官方說法）。那麼接下來演示如何變成一個友好的庫。

首先，我我的喜歡本地安裝 commitizen，喜歡全局安裝的同志們能夠忽略：

yarn add commitizen --dev # npm i commitizen --save-dev
複製代碼

而後，執行下面的命令來自動安裝&配置 cz-conventional-changelog：

./node_modules/.bin/commitizen init cz-conventional-changelog --yarn --dev
 # or npm
./node_modules/.bin/commitizen init cz-conventional-changelog --save-dev
 # or npx
npx commitizen init cz-conventional-changelog --yarn --dev
 # or 若是你已經全局安裝了 commitizen
commitizen init cz-conventional-changelog --yarn --dev
複製代碼

上面的命令作了兩項操做：

1. 經過 npm 或 yarn 安裝了包依賴 cz-conventional-changelog。
2. 在 package.json 中自動配置了以下內容：

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}
複製代碼

其實你徹底能夠本身手動來處理，首先安裝依賴包：

yarn add cz-conventional-changelog --dev
複製代碼

而後在 package.json 文件中加入上面的配置，結果是同樣的。

cz-conventional-changelog 這玩意被官方稱爲「adapter」，翻譯爲適配器。

最後執行 git-cz 命令，或者添加到 scripts 中，執行 yarn commit 命令：

"scripts": {
  "commit": "git-cz"
}
複製代碼

一番 commit 下來，項目的 commit 記錄看起來效果以下：

官方還很臭美的貼了一個 badge 圖標連接，能夠放到項目首頁中以示「我是一個 a Commitizen friendly repository」：

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
複製代碼

上面的操做若是都成功的話，那麼項目中就可使用 git-cz 命令，或者 yarn commit 命令來取代 git commit 命令了。可是不足的是：

1. 項目中依舊能夠繼續使用 git commit 命令來提交不規範的信息，極可能項目中的同事會忘記，致使繼續使用 git commit 來提交代碼。
2. 圖片中能夠發現，有些 commit 信息首字母大寫，有些 commit 信息首字母小寫，因此並不能強制要求大小寫的規範。

這你能接受嗎？反正我不能接受，不能接受的大家，能夠繼續往下瞄。

commitlint 使用

yarn add @commitlint/config-conventional @commitlint/cli --dev
複製代碼

在專門的 commitlint 配置文件 commitlint.config.js 中配置以下：

module.exports = {
  extends: ['@commitlint/config-conventional']
};
複製代碼

相似於 eslint，commitlint 還支持相似於 .commitlintrc.js、.commitlintrc.json、.commitlintrc.yml 名稱的配置文件，又或者在 package.json 中添加 commitlint 字段。

而後安裝 husky，這是爲了添加 git hooks，使得 git commit 也可以符合 commit 規範。

yarn add husky --dev
複製代碼

在 package.json 中配置 husky 鉤子：

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}
複製代碼

上面的操做若是都成功的話，那麼你使用 git commit 命令時，就必須老老實實的使用符合 commitlint 規範的信息了。嗯？有沒有像 git-cz 這種彈窗交互式的命令工具呢？有：

yarn add @commitlint/prompt-cli --dev
複製代碼

而後在 package.json 中配置 scripts:

{
  "scripts": {
    "commit": "commit"
  }
}
複製代碼

這樣，你就能夠執行 yarn commit 命令來更方便的提交符合規範的 commit 信息了。至此，commitlint 解決了在 commitizen 中不足之處的第一點和第二點，不管是 git commit，仍是 yarn commit，提交的內容都是符合規範的。

可是，有更多要求的你想要 <commit-message> 首字母是大寫的，有更多要求的他想要 <commit-message> 首字母是小寫的，對於不一樣的使用者，知足不一樣的規範需求，該咋整呢？

不墨跡了，還記得上面的 commitlint.config.js 文件嗎？我說過和 eslint 很像，因此你懂的，commitlint 也支持 rules 配置。你能夠經過設置規則 subject-case 來知足剛纔的需求：

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [2, 'always', ['upper-case']]
  }
};
複製代碼

上面的配置，表示 <commit-message> 必須首字母大寫，若是你要小寫，配置以下：

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [2, 'never', ['upper-case']]
  }
};
複製代碼

更多 rules 配置，請查看：

marionebl.github.io/commitlint/…

:information_source: 使用 @commitlint/config-conventional 後，默認 <commit-message> 是小寫的規範。

因此，你徹底能夠本身 diy，配置出你以爲滿意的 commit 規範。

最終使用版本

想不到的是，你能夠結合使用 commitizen 和 commitlint，畢竟感受 commitizen 的彈窗交互命令 git-cz 比後者好用不少。

首先，commitlint 提供了一個符合 commitizen 要求的適配器 adapter：

yarn add @commitlint/prompt --dev
複製代碼

:information_source: 和 @commitlint/prompt-cli 不同，不要搞混了。

而後，在 package.json 配置以下：

"config": {
    "commitizen": {
      "path": "./node_modules/@commitlint/prompt"
    }
  }
複製代碼

配置成功後，你就依舊能夠結合使用 git-cz 和 commitlint 了，爽歪歪~~

總結下來，你的 package.json 看起來以下：

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "devDependencies": {
    "@commitlint/cli": "~7.2.1",
    "@commitlint/config-conventional": "~7.1.2",
    "@commitlint/prompt": "~7.2.1",
    "cz-conventional-changelog": "~2.1.0",
    "husky": "~1.1.3"
  }
}
複製代碼