開箱即用的代碼提交規範

開篇

在團隊中代碼提交（git commit）會有各類各樣的風格，甚至有些人根本沒有 commit 規範的概念，因此在咱們回頭去查找在哪一個版本出現問題的時候，就會很是尷尬😅，很難快速定位到問題。爲了項目的規範化，代碼提交規範就顯得尤其重要！下面是我作的代碼提交規範插件 vue-cli-plugin-commitlint（對 conventional-changelog-angular 進行了修改/封裝）。開箱即用！

vue-cli-plugin-commitlint 介紹

vue-cli-plugin-commitlint 是根據 vue 插件的形式寫的，能夠執行 vue add commitlint 直接使用，若是不是 vue 的項目也能夠根據下面的配置自行配置。

結合 commitizen commitlint conventional-changelog-cli husky conventional-changelog-angular，進行封裝，一鍵安裝，開箱即用的代碼提交規範。

功能

1. 自動檢測 commit 是否規範，不規範不容許提交
2. 自動提示 commit 填寫格式。不怕忘記規範怎麼寫
3. 集成 git add . && git commit 不須要在執行兩個命令
4. 自動生成 changelog

配置

1. 若是您是 vue-cli3 的項目能夠直接使用便可

vue add commitlint
複製代碼

2. 若是您不是 vue-cli3 的項目

npm i vue-cli-plugin-commitlint commitizen commitlint conventional-changelog-cli husky -D
複製代碼

• 在 package.json 中添加

{
  "scripts": {
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
    "cz": "npm run log && git add . && git cz"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"
    }
  }
}
複製代碼

增長 commitlint.config.js 文件

module.exports = {
  extends: ['./node_modules/vue-cli-plugin-commitlint/lib/lint']
};
複製代碼

使用

npm run cz  # git add . && git commit -m 'feat:(xxx): xxx'
npm run log # 生成 CHANGELOG
複製代碼

1. 代碼提交 npm run cz

2. 選擇一個類型會自動詢問

   1. (非必填）本次提交的改變所影響的範圍
   2. (必填）寫一個簡短的變化描述
   3. (非必填）提供更詳細的變動描述
   4. (非必填)是否存在不兼容變動?
   5. (非必填)這次變動是否影響某些打開的 issue

changelog 演示

規則

規範名	描述
docs	僅僅修改了文檔，好比 README, CHANGELOG, CONTRIBUTE 等等
chore	改變構建流程、或者增長依賴庫、工具等
feat	新增 feature
fix	修復 bug
merge	合併分支
perf	優化相關，好比提高性能、體驗
refactor	代碼重構，沒有加新功能或者修復 bug
revert	回滾到上一個版本
style	僅僅修改了空格、格式縮進、都好等等，不改變代碼邏輯
test	測試用例，包括單元測試、集成測試等

總結

目前我有好幾個項目都在使用這套規範，用起來簡直不要太爽！

項目地址：github.com/luoxue-vict…

歡迎來 pr、star

最後有兩件小事

1. 有想入羣的學習前端進階的加我微信 luoxue2479 回覆加羣便可
2. 有寫錯的地方和更好的建議能夠在下面 留言，一塊兒討論