安裝Husky + commitlint 規範 commit 訊息

更新於 發佈於 閱讀時間約 6 分鐘

在開發用例時,撰寫清楚且統一的提交資訊非常重要,因為它能讓團隊成員快速理解每次提交的更改內容。

為了了解這個問題,可以使用Husky、Commitlint 來建立一套提交訊息規範,確保所有發布者都遵循相同的格式。

套件

  • husky :是一個 Git Hooks 工具,可以在git commitgit push隨時執行外部的驗證腳本。
  • commitlint : 可用來驗證提交訊息格式

安裝流程

步驟1:安裝 Husky

作用:是一個 Git Hooks 工具,可以在git commitgit push有時執行額外的實驗腳本。

npm install --save-dev husky

這次將 Husky 安裝到devDependencies,並保證它只在開發環境中使用。


步驟2:初始化 Husky

作用:這些步驟將在專題中建立 目錄,讓 Husky可以.husky/管理 Git Hooks。

npm husky init

這會做兩件事:

  • package.json中新增prepare腳本
"scripts": { 
"prepare": "husky install"
}
  • 執行husky install指令,在個人資料中建立 .husky/目錄:
.husky/ 
├── _
└── pre-commit

如果preparescript沒有執行(或Husky沒有正常運作),可以手動執行:

npm run prepare


步驟 3:安裝 commitlint cli & conventional config

npm install --save-dev  @commitlint /config-conventional @commitlint /cli


步驟 4:設定 commitlint 設定欄

echo  "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.cjs


步驟 5:新增 Git Hook

作用:Husky 允許我們自行註冊 Git Hooks,例如pre-commitcommit-msg

(1)新增pre-commitHook

這次會議是每次執業git commit前擔任執業npm test

npx husky add .husky / pre-commit “npm test”

本次 .husky/pre-commit產物檔案,內容如下:

npm test

如果npm test不存在,建議先package.json加入:

"scripts": { 
"test": "echo \"No tests available\" && exit 0"
}

(2)新增commit-msgHook

(驗證 Commit 訊息格式)

如果你已經安裝commitlint,可以使用 Husky 來保證 commit 訊息符合 Conventional Commits 規範:

npm husky 加 .husky/commit-msg 

此處建立 .husky/commit-msg,內容如下:

# 1. 將全形冒號(:)轉換為半形冒號(:
sed -i '' -E 's/:/:/g' "$1" # 將全形冒號轉換為半形冒號

# 2. 確保冒號後面有且只有一個空格
sed -i '' -E 's/^([a-zA-Z]+):[[:space:]]*/\1: /' "$1" # 冒號後面有空格且只有一個

# 3. 移除開頭空白
sed -i '' -E 's/^[[:space:]]+//g' "$1" # 移除開頭的空格

# 4. 如果 message 是空的,設置一個預設值
sed -i '' -E 's/^[[:space:]]*$/feat: Update commit message/g' "$1" # 補充預設訊息

# 5. 執行 commitlint 驗證
npx --no -- commitlint --edit "$1"

這樣,每次git commitcommitlint都會自動檢查 commit 訊息是否合法。


步驟 6:測試 Husky 是否運行

執行以下指令,測試Husky是否成功安裝並運行:

git commit  -m "test: 測試 Husky"

如果:

  • 成功提交,代表 Husky 正常運作
  • 出錯(例如 commit 訊息不符合規範),則會顯示錯誤錯誤訊息,阻止提交— commit
    訊息的:需要形式
    — :後面有一個空格,這是正確格式
    — <type>必填是小寫(例如feat、、、) — 不能為空fixchoredocs
    <subject>

提交訊息的格式不符合常規提交

根據常規提交規則,提交訊息應是:

<Type> : <subject>

Type類型

commitlint 定義 Type 有以下這些,如果不符合以下則會報錯!

  • build:部署系統或外部依賴的變更(例如:gulp、broccoli、npm)
  • ci:修改 CI(持續整合)設定列或腳本(例如:GitHub Actions、SauceLabs)
  • docs:只關注事情的改變
  • 特性:新增功能
  • fix:修改錯誤
  • perf:優化的程式碼更改
  • 重構:既不是修改錯誤,也不是新增功能的重構
  • 測試:新增或修改測試內容
留言
avatar-img
留言分享你的想法!
avatar-img
Yi的沙龍
0會員
1內容數
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
最近在找資料的時候,偶然發現了兩個有趣的 git 指令:git commit --fixup 和 git rebase -i <sha> --autosquash。 研究了下發現對於像我這種每次 commit 都要斤斤計較,盡可能完美的人來說非常好用,因此寫一篇筆記記錄一下用法。
Thumbnail
最近在找資料的時候,偶然發現了兩個有趣的 git 指令:git commit --fixup 和 git rebase -i <sha> --autosquash。 研究了下發現對於像我這種每次 commit 都要斤斤計較,盡可能完美的人來說非常好用,因此寫一篇筆記記錄一下用法。
Thumbnail
您是否苦於網路資訊爆炸嗎? 教學何其多,但卻無法好好選擇的困境呢? 歡迎加入「🔒 阿Han的軟體心法實戰營」, 這裡不給您冗餘的雜訊, 單刀直入直接送您重點, 避開選擇障礙的困境, 讓您獲得業界標準的開發起手式, 成為Top 1的頂尖人才。 使用Linux作業系統的朋友們應該對於「htop
Thumbnail
您是否苦於網路資訊爆炸嗎? 教學何其多,但卻無法好好選擇的困境呢? 歡迎加入「🔒 阿Han的軟體心法實戰營」, 這裡不給您冗餘的雜訊, 單刀直入直接送您重點, 避開選擇障礙的困境, 讓您獲得業界標準的開發起手式, 成為Top 1的頂尖人才。 使用Linux作業系統的朋友們應該對於「htop
Thumbnail
您是否苦於網路資訊爆炸嗎? 教學何其多,但卻無法好好選擇的困境呢? 歡迎加入「🔒 阿Han的軟體心法實戰營」, 這裡不給您冗餘的雜訊, 單刀直入直接送您重點, 避開選擇障礙的困境, 讓您獲得業界標準的開發起手式, 成為Top 1的頂尖人才。 我們開發程式的時候, 常常會使用Git來管理我們的
Thumbnail
您是否苦於網路資訊爆炸嗎? 教學何其多,但卻無法好好選擇的困境呢? 歡迎加入「🔒 阿Han的軟體心法實戰營」, 這裡不給您冗餘的雜訊, 單刀直入直接送您重點, 避開選擇障礙的困境, 讓您獲得業界標準的開發起手式, 成為Top 1的頂尖人才。 我們開發程式的時候, 常常會使用Git來管理我們的
Thumbnail
本篇使用最簡單的GitLab-ci.yml內容,進而實現了CI的功能,操作方式文章所示。
Thumbnail
本篇使用最簡單的GitLab-ci.yml內容,進而實現了CI的功能,操作方式文章所示。
Thumbnail
有關 git add, git commit, git push
Thumbnail
有關 git add, git commit, git push
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News