前端使用工具規範commit資訊

空山與新雨發表於2022-12-24
前端MIT

前言

透過工具規範git提交資訊也是工程化的一部分，在前端領域有一些工具為我們提供了相關功能，在這裡做一下使用總結。

commitlint

  1. commitlint是什麼？
    就像eslint用來檢查js程式碼是否標準，commitlint用來檢查提交資訊是否滿足固定格式的工具。
    同樣，commitlint提供了一些規則供我們配置。

  2. commitlint怎麼用？
    和eslint一樣，commitlint提供了相應的api供我們呼叫、或者和其他工具整合
    安裝：npm install -g @commitlint/cli @commitlint/config-conventional 其中@commitlint/config-conventional是常用的外掛。 commitlint常用命令：

    • commitlint -e 命令就可以檢查.git/COMMIT_EDITMSG裡面的commit message是否符合格式；
    • commitlint -e ./aaa 命令就可以檢查檔案./aaa裡面內容是否符合格式；
    • commitlint -E HUSKY_GIT_PARAMS 讀取環境變數HUSKY_GIT_PARAMS對應的檔案的內容，默是.git/COMMIT_EDITMSG

  3. 配置檔案 commitlint.config.js/.commitlintrc.js

    類似於.eslintrc.js檔案，用來配置commitlint規則。extends欄位類似於eslint的extends

    module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
	'header-max-length': [2, 'always', 60],
  },
};

commitizen

  1. commitizen是什麼？

    正常git commit 我們可以寫出符合commitlint的提交資訊，但是如果有命令列提示我們一步步的寫就更方便了，於是出現了commitizen就是一個這樣的工具。

  2. commitizen怎麼用？

    • npm install commitizen 之後使用 git cz 來替代 git commit 提交資訊。
    • npm install cz-customizable

    cz-customizable 是可自定義的Commitizen外掛，

    commitizen中有個 Commitizen friendly的概念，如果是Commitizen-friendly ,執行git cz會進入互動式操作；如果不是Commitizen-friendly就會和普通git commit一樣。一般專案在沒有安裝相關外掛的情況下不是Commitizen-friendly, 要做到Commitizen-friendly需要adapter，比如：cz-customizable 或者cz-conventional-changelog 。cz-customizable 用的更多一些。

  3. 配置cz-customizable

    指定commitizen用哪個adapter：

    // package.json
"config": {
	"commitizen": { 
		"path": "node_modules/cz-customizable"
	},
	"cz-customizable": {
		"config": "config/path/to/my/config.js"
	}
}

    建立.cz-config.js自定義提交規則。

     - types: 描述修改的性質是什麼，是bugfix還是feat，在這裡進行定義。
 - scopes: 定義之後，我們就可以透過上下鍵去選擇 scope
 - scopeOverrides: 針對每一個type去定義scope
 - allowBreakingChanges: 設定為 ['feat', 'fix']，只有我們type選擇了 feat 或者是 fix，才會詢問我們 breaking message.
 - allowCustomScopes: 設定為 true，在 scope 選擇的時候，會有 empty 和 custom 可以選擇，顧名思義，選擇 empty 表示 scope 預設，如果選擇 custom，則可以自己輸入資訊
 - skipQuestions: 指定跳過哪些步驟，例如跳過我們剛剛說的詳細描述，設定其為 scope: ['body']，假設我們的專案也不會涉及到關聯 issue，我們可以設定其為 scope: ['body', 'footer']
 - subjectLimit: 描述的長度限制

    cz-customizable 會首先在專案根目錄下尋找: .cz-config.js 或 .config/cz-config.js，如果找不到，會去主目錄尋找。我們也可以在 package.json 中手動去指定配置檔案的路徑

總結

可以使用commitlint做提交資訊的校驗， 也可以使用commitizen簡化提交的負擔，還可以使用husky將這些約束放到提交鉤子裡，這些都是在本地做的校驗，開發者其實是可以跳過這些校驗和約束的，那麼如果要做更嚴格的約束就需要在遠端git伺服器上增加校驗處理。

相關文章