[Git] 我要整齊的Commit！用git-cz統一格式！

本文最後更新於：2024年5月30日晚上

介紹

簡述

在軟體開發中，Git是目前最主流的版本控制系統，用來追蹤和管理程式碼的變更。隨著專案規模的擴大，提交（commit）訊息的管理變得更加重要。
這時候，一個能幫助開發者規範提交訊息的工具就顯得特別重要。git-cz就是用來產生簡潔明瞭提交訊息的工具。

使用git-cz的優點

規範提交訊息：確保每個提交的訊息符合預定的格式，便於日後的程式碼管理和版本控制。
提高可讀性：標準化的提交訊息讓程式碼歷史更易讀，方便開發者快速理解每個變更的目的。
快速生成提交訊息：使用命令列交互工具可以快速的產生訊息，只需要輸入最重要的內容，其餘的部分將由工具生成，節省時間

呈現效果

git-cz的commit範例

格式

採用git-cz的Commit格式如下：

<type>(<scope>): <gitmoji> <description>

例如：

feat(controller): ✨ 新增管理訂單頁面中的批次修改功能

`<Type>`

類型如下：

test：增加測試功能
feat：新增/修改功能
fix：修正 Bug
chore：增加或修改第三方套件(輔助工具)等
docs：修改/新增文件
refactor：重構 or 優化，不屬於 bug 也不屬於新增功能等
style：修改程式碼格式或風格，不影響原有運作，例如 ESLint、PHP-CS-Fixer
ci：CI 相關更動
perf：提高效能的程式碼修正

`<scope>`

修改的範圍，可以按照需求分類。
以我自己開發Laravel為例：會按照功能組件拆成controller, service, request, command，輸入的內容通常為該檔案所屬的資料夾名稱，且為”單數”，全部小寫。

`<gitmoji>`

也許你會注意到，Commit說明文字前面多了一個emoji，這其實是為了提高commit的可讀性，在一堆文字當中，如果存在簡潔明瞭的圖示，就可以快速分辨fix、feat等等的不同，而這種用途的emoji又稱為gitmoji。
你也可以在這裡找到不同狀況下建議使用的gitmoji。
git-cz配合gitmoji使用效果加倍!

`<description>`

簡短的提交內容描述，字數限制的目的是強迫標題簡短，詳細的內容會放在commit的內文中。

安裝

指令

使用npm指令進行安裝此工具
(此工具為streamich/git-cz的forked，不使用原版工具的原因是原版無法提交時手動輸入<scope>文字內容)

npm install -g @stanlindsey/git-cz

配置設定檔

此工具預設會找執行指令位置的設定檔(通常是專案根目錄)，如果找不到就往上一個層級的資料夾找，直到根目錄為止。並且檔案名稱固定為changelog.config.js

所以我們在專案的根目錄或之上的路徑建立一個名為changelog.config.js 的檔案，並在檔案中寫入以下內容後儲存：

/**
 * source: https://gist.github.com/hankz1108/b0862d481c714e99067b06c2ca401510
 * package: https://github.com/stanlindsey/git-cz
 * gitmoji: https://github.com/carloscuesta/gitmoji/?tab=readme-ov-file
 * translate by: https://israynotarray.com/git/20221115/721294310/
 */
module.exports = {
  disableEmoji: false, // 是否禁用 emoji
  format: '{type}{scope}: {emoji} {subject}', // Commit 訊息的格式
  list: ['test', 'feat', 'fix', 'chore', 'docs', 'refactor', 'style', 'ci', 'perf'], // Commit 類型的清單
  maxMessageLength: 64, // Commit 訊息的最大長度
  minMessageLength: 3, // Commit 訊息的最小長度
  questions: ['type', 'scope', 'subject', 'body', 'breaking', 'issues', 'lerna'], // 問題的清單
  enableWritingScopes: true, // 是否可自訂scope內容
  // scopes: [], // Commit 範圍的清單
  types: { // Commit 類型的清單
    chore: {
      description: '增加或修改第三方套件(輔助工具)等 (maintain)', // Commit 類型的描述
      emoji: '📦', // Commit 類型的 emoji
      value: 'chore' // Commit 類型的值
    },
    ci: {
      description: 'CI 相關更動(Continuous Integration)',
      emoji: '💚',
      value: 'ci'
    },
    docs: {
      description: '修改/新增文件 (documentation)',
      emoji: '📝',
      value: 'docs'
    },
    feat: {
      description: '新增/修改功能 (Feature)',
      emoji: '✨',
      value: 'feat'
    },
    fix: {
      description: '修正 Bug (bug fix)',
      emoji: '🐛',
      value: 'fix'
    },
    perf: {
      description: '提高效能的程式碼修正',
      emoji: '⚡️',
      value: 'perf'
    },
    refactor: {
      description: '重構 or 優化，不屬於 bug 也不屬於新增功能等',
      emoji: '♻️',
      value: 'refactor'
    },
    release: {
      description: '新增正式釋出的 release commit 訊息',
      emoji: '🔖',
      value: 'release'
    },
    style: {
      description: '修改程式碼格式或風格，不影響原有運作，例如 ESLint、PHP-CS-Fixer (formatting, missing semi colons, …)',
      emoji: '💄',
      value: 'style'
    },
    test: {
      description: '增加測試功能 (when adding missing tests)',
      emoji: '✅',
      value: 'test'
    },
  },
  messages: {  // Commit 的提示訊息描述
    type: '請選擇您要 Commit 的類型(必選):',
    customScope: '選擇此次 Commit 影響的範圍(可選，若無，請按 Enter 略過):',
    subject: '簡短描述 Commit 的修正範圍(必填):\n',
    body: '更詳細的 Commit 說明(可選，若無，請按 Enter 略過):\n ',
    breaking: '列出所有重大更改(可選，若無，請按 Enter 略過):\n',
    footer: '此次 Commit 會關閉的 Issues, e.g #123(可選，若無，請按 Enter 略過):',
    confirmCommit: '請確認本次 Commit 描述。\n',
  },
};