Gitlab上手指南(八)|企業中常見的git規範介紹和husky+commitlint整合

語言: CN / TW / HK

俗話說,沒有規矩不成方圓,我們的git也需要規範。

下面介紹一下企業常用的一些規範。

分支管理規範

分支命名不能千奇百怪,必須有統一的命名方式。主要有以下幾種:

| 分支管理 | 命名規範 | 解釋 | | -------------- | --------------------------------------------------------------- | -------------------------------------------------------------- | | master 主分支 | master | 穩定版本分支,上線完成迴歸後後,由專案技術負責人從 release 分支合併進來,並打 tag | | test 測試分支 | test/yyyyMMdd_ 功能名稱示例:test/20220426_blog | 測試人員使用分支,測試時從 feature 分支合併進來 | | feature 功能開發分支 | feature/yyyyMMdd_ 功能名稱_負責人員示例:feature/20220426_blog_xiumubai | 新功能開發使用分支,基於master建立 | | fix bug修復分支 | fix/yyyyMMdd_ 功能名稱_負責人員示例:fix/20220426_blog_xiumubai | 緊急線上bug修復使用分支,基於master建立 | | release 上線分支 | release/版本號示例:release/0.1.0 | 用於上線的分支,基於 master 建立,必須對要併入的 feature 分支進行 Code review 後,才可併入上線 |

版本號管理規範

當我們上線的時候,需要給版本號打tag,下面是版本號規範:

``` 專案上線release分支建立定義:

第一個數字是主版本。第二個數字是次版本。第三個數字是補丁版本(hotfix 類的更新)。

主版本:含有破壞性更新、大調整等。 例如:1.1.0 > 2.0.0

次版本:增加新功能特性。例如:1.1.0 > 1.2.0

補丁版本:修復問題等。例如:1.1.0 > 1.1.1 ``` 下圖是一個圍繞git規範來的開發流程圖:

提交資訊規範

最後是commit的時候,需要對commit資訊規範,必須要加字首

| 字首 | 解釋 | | -------- | ------------ | | feat | 新功能 | | fix | 修復 | | docs | 文件變更 | | style | 程式碼格式 | | refactor | 重構 | | perf | 效能優化 | | test | 增加測試 | | revert | 回退 | | build | 打包 | | chore | 構建過程或輔助工具的變動 |

下圖是vue3原始碼的提交資訊規範:

下面我們就實際操作一下,如果通過husky+commitlint整合一個統一規範的git commit資訊。

配置 git 提交的校驗鉤子

  • husky: git提交時觸發hooks
  • commitlint: 對提交的內容做規範校驗 husky,主要對pre-commit和commit-msg鉤子做校驗。

```

安裝husky

yarn add husky -D

初始化husky配置,在根目錄新增.husky配置檔案。初始化配置pre-commit

npx husky-init

另外新增一個hooks,commit-msg

npx husky add .husky/commit-msg ```

目錄結構是下面這樣子的:

commit-msg檔案中新增 npm run commitlint

pre-commit檔案中有個npm run test我們先註釋掉,不然會報錯。

安裝commitlint

```

新增依賴檔案

yarn add @commitlint/config-conventional @commitlint/cli -D ```

新增配置檔案,新建commitlint.config.js,然後新增下面的程式碼:

module.exports = { extends: ['@commitlint/config-conventional'], // 校驗規則 rules: { 'type-enum': [ 2, 'always', [ 'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build', ], ], 'type-case': [0], 'type-empty': [0], 'scope-empty': [0], 'scope-case': [0], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'header-max-length': [0, 'always', 72], }, }

配置scripts

因為我們需要執行npm run commitlint,所以需要在package.json檔案中新增如下程式碼:

```

在scrips中新增下面的程式碼

{ "scripts": { "commitlint": "commitlint --config commitlint.config.js -e -V" }, } ```

配置結束,現在當我們填寫commit資訊的時候,前面就需要帶著下面的subject

'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build',

比如:git commit -m "feat: test",注意feat:後面有個空格

我們來寫一個錯誤的來測試一下:

提示subject是空的。

使用正確的提交方式,提交成功了

使用 commitizen 做git規範化提交

由於添加了commitlint驗證,對於不熟悉提交規範的新手同學會有一定影響,可以新增 commitizen 工具,手動生成規範化commit。

Commitizen是一個格式化commit message的工具。

```

工具安裝

yarn add -D commitizen ```

使用cz-conventional-changelog

安裝工具

yarn add cz-conventional-changelog -D

配置命令

"script": { "commit": "cz" }

在package.json 中新增定義commitizen使用規則,

{ "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }, }

當執行git commit的時候,就可以提示我們填寫程式碼規則了

自定義 commitizen 規則

使用 cz-customizable 工具

```

安裝依賴

yarn add cz-customizable -D ```

配置命令

"script": { "commit": "git-cz" }

在package.json 中新增自定義commitizen,使用git-cz執行git commit命令

"config": { "commitizen": { "path": "./node_modules/cz-customizable" } }

在根目錄建立的.cz-config.js, 自定義commit提示內容

module.exports = { types: [ { value: 'feat', name: '✨feat: 新功能' }, { value: 'fix', name: '🐛fix: 修復' }, { value: 'docs', name: '✏️docs: 文件變更' }, { value: 'style', name: '💄style: 程式碼格式(不影響程式碼執行的變動)' }, { value: 'refactor', name: '♻️refactor: 重構(既不是增加feature,也不是修復bug)' }, { value: 'perf', name: '⚡️perf: 效能優化' }, { value: 'test', name: '✅test: 增加測試' }, { value: 'chore', name: '🚀chore: 構建過程或輔助工具的變動' }, { value: 'revert', name: '⏪️revert: 回退' }, { value: 'build', name: '📦️build: 打包' }, { value: 'ci', name: '👷CI: related changes' } ], // override the messages, defaults are as follows messages: { type: '請選擇提交型別(必選):', // scope: '請輸入檔案修改範圍(可選):', customScope: '請輸入修改範圍(可選):', subject: '請簡要描述提交(必填):', // body: '請輸入詳細描述(可選,待優化去除,跳過即可):', // breaking: 'List any BREAKING CHANGES (optional):\n', footer: '請輸入要關閉的issue(待優化去除,跳過即可):', confirmCommit: '確認使用以上資訊提交?(y/n/e/h)' }, // used if allowCustomScopes is true allowCustomScopes: true, // allowBreakingChanges: ['feat', 'fix'], skipQuestions: ['body', 'footer'], // limit subject length, commitlint預設是72 subjectLimit: 72 }

當我們提交程式碼的時候,需要先git add .,然後執行npm run commit,就可以根據響應的提示填寫commit資訊 了,如下圖所示: