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