代碼規范是軟體開發領域經久不衰的話題，幾乎所有工程師在開發程序中都會遇到或思考過這一問題，而隨著前端應用的大型化和復雜化，越來越多的前端團隊也開始重視代碼規范，同樣，前段時間，筆者所在的團隊也開展了一波開源治理，而其中代碼規范就占據了很重要的一項，接下來的幾篇文章，將會對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及所修改的檔案進行提交啦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/304213.html
標籤：其他
上一篇：在 JavaScript 中，Math.max() 和 Math.min() 在不填入引數的情況下為什么回傳 -INFINITY 與 INFINITY