前端規範之Git提交規範（Commitizen）

Yellow_ice發表於2021-09-29
前端GitMIT

     程式碼規範是軟體開發領域經久不衰的話題，幾乎所有工程師在開發過程中都會遇到或思考過這一問題。而隨著前端應用的大型化和複雜化，越來越多的前端團隊也開始重視程式碼規範。同樣，前段時間，筆者所在的團隊也開展了一波開源治理，而其中程式碼規範就佔據了很重要的一項。接下來的幾篇文章，將會對JS程式碼規範、CSS規範、Git提交規範、Git工作流規範以及文件規範進行詳細的介紹~

    系列文章：

  •     前端規範之JS程式碼規範（ESLint + Prettier）
  •     前端規範之CSS規範（Stylelint）
  •     前端規範之Git提交規範（Commitizen）
  •     前端規範之Gti工作流規範（Husky + Commitlint + Lint-staged）
  •     前端規範之文件規範

    本文主要介紹了前端規範之Git提交規範（Commitizen），將會對Commitizen的使用進行介紹，歡迎大家交流討論~

 

1. 背景

    Git是目前世界上最先進的分散式版本控制系統，在我們平時的專案開發中已經廣泛使用。而當我們使用Git提交程式碼時，都需要寫Commit Message提交說明才能夠正常提交。

git commit -m "提交"

    然而，我們平時在編寫提交說明時，通常會直接填寫如"fix"或"bug"等不規範的說明，不規範的提交說明很難讓人明白這次程式碼提交究竟是為了什麼。而在工作中，一份清晰簡介規範的Commit Message能讓後續程式碼審查、資訊查詢、版本回退都更加高效可靠。因此我們需要一些工具來約束開發者編寫符合規範的提交說明。

 

2. 提交規範

    那麼，什麼樣的提交說明才能符合規範的說明呢？不同的團隊可以制定不同的規範，當然，我們也可以直接使用目前流行的規範，比如Angular Git Commit Guidelines。接下來將會對目前流行的Angular提交規範進行介紹。

2.1 提交格式

    符合規範的Commit Message的提交格式如下，包含了頁首（header）、正文（body）和頁尾（footer）三部分。其中，header是必須的，body和footer可以忽略。

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

2.2 頁首設定

    頁首（header）通常只有一行，包括了提交型別（type）、作用域（scope）和主題（subject）。其中，type和subject是必須的，scope是可選的。

    2.2.1 提交型別

    提交型別（type）用於說明此次提交的型別，需要指定為下面其中一個：

 

    2.2.2 作用域

    作用域（scope）表示此次提交影響的範圍。比如可以取值api，表明隻影響了介面。

    2.2.3 主題

    主題（subject）描述是簡短的一句話，簡單說明此次提交的內容。

2.3 正文和頁尾

    正文（body）和頁首（footer）這兩部分不是必須的。

    如果是破壞性的變更，那就必須在提交的正文或腳註加以展示。一個破壞性變更必須包含大寫的文字 BREAKING CHANGE，緊跟冒號和空格。腳註必須只包含 BREAKING CHANGE、外部連結、issue 引用和其它後設資料資訊。例如修改了提交的流程，依賴了一些包，可以在正文寫上：BREANKING CHANGE：需要重新npm install，使用npm run cm代替git commit。

    下面給出了一個Commit Message例子，該例子中包含了header和body。

chore: 引入commitizen

BREANKING CHANGE：需要重新npm install，使用npm run cm代替git commit

    當然，在平時的提交中，我們也可以只包含header，比如我們修改了登入頁面的某個功能，那麼可以這樣寫Commit Message。

feat(登入）：新增登入介面

 

3. Commitizen

    雖然有了規範，但是還是無法保證每個人都能夠遵守相應的規範，因此就需要使用一些工具來保證大家都能夠提交符合規範的Commit Message。常用的工具包括了視覺化工具和資訊互動工具，其中Commitizen是常用的Commitizen工具，接下來將會先介紹Commitizen的使用方法。

3.1 什麼是Commitizen

    Commitizen是一個撰寫符合上面Commit Message標準的一款工具，可以幫助開發者提交符合規範的Commit Message。

3.2 安裝Commitizen

    可以使用npm安裝Commitizen。其中，cz-conventional-changelog是本地介面卡。

npm install commitizen cz-conventional-changelog --save-dev

3.3 配置Commitizen

    安裝好Commitizen之後，就需要配置Commitizen，我們需要在package.json中加入以下程式碼。其中，需要增加一個script，使得我們可以通過執行npm run cm來代替git commit，而path為cz-conventional-changelog包相對於專案根目錄的路徑。

”script": {
  "cm: "git-cz"
},
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

    配置完成之後，我們就可以通過執行npm run cm來代替git commit，接著只需要安裝提示，完成header、body和footer的編寫，就能夠編寫出符合規範的Commit Message。

    

 

4. 視覺化提交工具

    除了使用Commitizen資訊互動工具來幫助我們規範Commit Message之外，我們也可以使用編譯器自帶的視覺化提交工具。接下來，將會介紹VSCode視覺化提交工具的使用方法。

    在VSCode的EXTENSIONS中找到git-commit-plugin外掛，點選install進行安裝。

    

    安裝完成之後，可以通過git add新增要提交的檔案，接著，在Source Control點選show git commit template圖示，開始編寫Commit Message資訊。

    

     接下來只需要按照指引進行Commit Message的編寫。

    

    當編寫完成之後，可以得到符合規範的Commit Message，這個時候就可以放心將Commit Message及所修改的檔案進行提交啦。

    

 

 

 

 

 

 

 

 

相關文章