前端規範之Git提交規範(Commitizen)

Yellow_ice發表於2021-09-29

     程式碼規範是軟體開發領域經久不衰的話題,幾乎所有工程師在開發過程中都會遇到或思考過這一問題。而隨著前端應用的大型化和複雜化,越來越多的前端團隊也開始重視程式碼規範。同樣,前段時間,筆者所在的團隊也開展了一波開源治理,而其中程式碼規範就佔據了很重要的一項。接下來的幾篇文章,將會對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及所修改的檔案進行提交啦。

    

 

 

 

 

 

 

 

 

相關文章