來吧!用 git-cz 讓你的 Git Commit 訊息更美一點!

前言

你有想過嗎?你的 Git Commit 是不是有點醜呢?然後時常不知道到底要寫什麼?如果有的話,那麼這一篇就要來介紹一個工具,也就是 git-cz,讓你解放你的 Git Commit 訊息,讓你的 Git Commit 更美更漂亮,說是懶人福音也不為過唷。

Git Commit 的重要性

一開始我們先聊一下 Git Commit 的重要性,在以前我有分享過一篇文章叫做「淺談 Git Flow 與 commit 規範」,其中裡面有提到關於「Git Commit 規範」的部分。

而這裡面有特別提到 Commit Type 的重要

  • feat - 新增/修改功能 (Feature)
  • fix - 修正 Bug (bug fix)
  • docs - 修改/新增文件 (documentation)
  • style - 修改程式碼格式或風格,不影響原有運作,例如 ESLint (formatting, missing semi colons, …)
  • refactor - 重構 or 優化,不屬於 bug 也不屬於新增功能等
  • test - 增加測試功能 (when adding missing tests)
  • chore - 增加或修改第三方套件(輔助工具)等 (maintain)

儘管我們已經知道這個概念,但實際開發上可能會忘記每個 Commit Type 的意義,或是不知道該怎麼寫,這時候就會出現一些醜醜的 Commit 訊息,例如…

一推沒意義的 Commit

上面這張圖是取至於我的部落格,完全一推沒有意義的 Commit,原因是為什麼呢?因為我懶人癌症發作,所以不想多花時間去思考 Commit Type。

因此為了解決這個問題,我們將要來介紹本篇的主題,也就是 git-cz。

git-cz

git-cz 是一個 Commit 管理工具,可以讓你的 Commit 統一格式且更美觀,舉例來講:

Image

上面這張圖是我簡單示範使用 git-cz 的畫面,你可以看到至少比用 post 好很多,而且還有漂漂的 Emoji,這樣的 Commit 訊息,不香嗎?

那麼該怎麼使用呢?本身 git-cz 有提供多種安裝方式(npm or npx),而這一篇我將會示範使用 npm 安裝,並且是 Global 的方式,其主要原因是或許你會因此愛上 git-cz,所以想要在其他專案也使用,而不是每個專案都要安裝一次。

安裝 git-cz

首先請打開終端機輸入以下指令

1
npm install -g git-cz

沒錯!就是這麼簡單,接著我們就可以準備開始使用 git-cz 囉~

使用 git-cz

接著請你隨便打開一個專案,並且進入到該專案的資料夾,接著輸入以下指令

1
git cz

這時候你應該會噴出一段錯誤訊息

1
✖  error     No files staged!

其主要原因是因為你沒有把檔案加入到 Stage(意指 git add .),所以 git-cz 會噴出這個錯誤訊息,所以請你先把檔案加入到 Stage,接著再輸入 git cz,這時候你就會看到 git-cz 的畫面了。

git-cz

你可以透過方向鍵去選取你本次 Commit 的類型,那麼這些 Commit 類型都是 git-cz 所預設提供的(如果你想客製化我後面會再介紹),接著選取你要的 Commit 類型後可以按下 Enter,然後你會看到 git-cz 會叫你填寫一下當前 Commit 的內容,這時候你就可以填寫你的 Commit 訊息了。

輸入 commit 訊息

輸入完畢後,再按一次 Enter 他會再問你「Provide a longer description of the change」,這句話意思是指更詳細的修改說明,如果沒有要填寫的話,你可以直接按下 Enter 略過

Provide a longer description of the change

接著你應該會被問 「List any breaking changes」,這句話意思是指是否有破壞性的修改,如果沒有的話,一樣可以直接按下 Enter 略過

List any breaking changes

最後一個則是「Issues this commit closes, e.g #123」,這句話意思是指是否有對應的 Issue,如果沒有的話,一樣可以直接按下 Enter 略過,這樣子你的 Commit 就完成了。

完成 Commit

透過選取跟問答的方式我們可以輕輕鬆鬆地獲取一個漂亮的 Commit 訊息,而這些規範基本上都與「Git Commit 規範」觀念相同,因此是完全可以沿用的,但是卻可以讓我們更快速地完成 Commit,而且也不用擔心格式錯誤跟人為的錯誤,因此這個也可以稱之為懶人福音,真正的解放大腦!

那麼這邊提醒一下,改用 git-cz 之後,你要將你原本輸入指令方式稍微調整一下,例如:

git add . => git commit -m 'first' => git push

改成

git add . => git cz => git push

這樣子才能正確使用 git cz 唷。

客製化 git-cz

如果你覺得 git-cz 預設的 Commit 類型不夠用,你可以透過以下方式來客製化你的 Commit 類型

首先打開你的專案,並在專案根目錄下新增一個檔案,檔案名稱為 changelog.config.js,而這個內容其實官方有提供預設的,這邊我有補上中文註解,讓你可以直接複製貼上方便自己修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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'], // 問題的清單
scopes: [], // Commit 範圍的清單
types: { // Commit 類型的清單
chore: {
description: 'Build process or auxiliary tool changes', // Commit 類型的描述
emoji: '🤖', // Commit 類型的 emoji
value: 'chore' // Commit 類型的值
},
ci: {
description: 'CI related changes',
emoji: '🎡',
value: 'ci'
},
docs: {
description: 'Documentation only changes',
emoji: '✏️',
value: 'docs'
},
feat: {
description: 'A new feature',
emoji: '🎸',
value: 'feat'
},
fix: {
description: 'A bug fix',
emoji: '🐛',
value: 'fix'
},
perf: {
description: 'A code change that improves performance',
emoji: '⚡️',
value: 'perf'
},
refactor: {
description: 'A code change that neither fixes a bug or adds a feature',
emoji: '💡',
value: 'refactor'
},
release: {
description: 'Create a release commit',
emoji: '🏹',
value: 'release'
},
style: {
description: 'Markup, white-space, formatting, missing semi-colons...',
emoji: '💄',
value: 'style'
},
test: {
description: 'Adding missing tests',
emoji: '💍',
value: 'test'
},
},
messages: { // Commit 的訊息描述
type: 'Select the type of change that you\'re committing:',
customScope: 'Select the scope this component affects:',
subject: 'Write a short, imperative mood description of the change:\n',
body: 'Provide a longer description of the change:\n ',
breaking: 'List any breaking changes:\n',
footer: 'Issues this commit closes, e.g #123:',
confirmCommit: 'The packages that this commit has affected\n',
},
};

那麼如果你看不習慣上面一推英文的話,我也提供我的調整版本給你參考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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'], // 問題的清單
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 (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',
},
};

當你客製化後,你就可以看到原本英文版的 Commit 提示訊息變成中文版的了

中文化

全域 git-cz 設定

請注意,這個方式我不確定 Window 系統是否可以,但是在 Mac 系統上實際測試是可以的。

前面有提到關於客製化的部分,但是那個方式會需要在 Project 下額外建立一個 changelog.config.js 檔案,這樣子其實滿雞助的,所以我們可以透過全域的方式來設定,這樣子就不用每個 Project 都要額外建立一個 changelog.config.js 檔案了

首先請打開你的 Mac,切換到你的 Home 目錄下(如:/Users/rayxu/),接著在這目錄下面建立一個 changelog.config.js 檔案,並將下方程式碼貼進去就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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'], // 問題的清單
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 (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',
},
};

這樣子 Global 就會吃到你自定義的設定囉!

隱藏 changelog.config.js 小技巧

由於 changelog.config.js 會放在你的 Home 目錄下(如:/Users/rayxu/),其實很突兀,所以這邊你可以試著輸入以下指令將 changelog.config.js 隱藏

1
chflags hidden changelog.config.js

隱藏 changelog.config.js

如果出現 chflags: changelog.config.js: No such file or directory 代表路徑錯誤,請確認你的路徑是否正確唷。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ