使用 Husky + Commitlint + Lint-staged 約束每一次 Git 提交

每一名開發人員都有自己獨特的代碼風格。但對於多人協作項目，保持統一的風格有利於項目維護。

我們可以在項目中引入 ESLint、Prettier 來規範代碼，但這無法約束 Git commit message

這時候可以藉助 Husky 等工具來把好最後一關

 

常用工具

1. eslint (https://github.com/eslint/eslint)

  JavaScript 代碼檢測工具，檢測並提示錯誤或警告信息

2. prettier (https://github.com/prettier/prettier)

  代碼格式化工具，更好的代碼風格效果

3. husky (https://github.com/typicode/husky)

  Git hooks 工具, 可以在執行 git 命令時，執行自定義的腳本程序

4. lint-staged (https://github.com/okonet/lint-staged)

  對暫存區 (git add) 文件執行腳本

5. commitlint (https://github.com/conventional-changelog/commitlint)

檢測 git commit 內容是否符合定義的規範

 

 

一、Husky

Husky 是一款 Git Hooks 工具，可以在執行特定的 git 命令時（如: git commit, git push）觸發對應的腳本

安裝: (當前版本 7.x)

$ npm i -D husky
$ npx husky install
$ npm set-script prepare "husky install"

執行以上代碼之後，項目的根目錄會多出一個 .husky 文件夾，並且 package.json 中會增加一個腳本執行命令

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

// prepare 會在每次 npm install 的時候執行

現在 husky 已經安裝好了，接下來添加對應的鉤子函數

比如我需要在每次 git commit 提交前執行某些操作，就可以添加一個 commit-msg 鉤子

npx husky add .husky/commit-msg 'npm test'

然後 .husky 目錄下就會增加一個 commit-msg 文件

這樣每一次 git commit 都會執行一次 npm test

// 如果面臨特殊情況，需要繞過 Git Hooks，可以使用 --no-verify  

 

 

二、 Commitlint

Commitlint 可以校驗 git commit message, 只有規範的 commit message 才能提交

安裝: (當前版本 16.x)

npm i -D @commitlint/{config-conventional,cli}

然後在項目根目錄新建一個 commitlint.config.js 文件

// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };

上一節已經在項目中引入了 Husky，修改一下 commit-msg 腳本，在每次 git commit 的時候執行 commitlint 校驗

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

完成以上配置之後，只有滿足規範的 commit message 才能提交（具體的規範可以查看文檔）

不滿足規則的提交會報錯，比如：

 

 

三、Lint-staged

在提交的代碼的時候，可以通過 ESLint、Prettier 等工具來格式化代碼

但如果直接處理全部代碼，首先是可能存在性能問題，其次是可能會修改掉別的同事的代碼

這時可以引入 lint-staged，它可以過濾出 Git 代碼暫存區文件，這樣就不會影響到未更改的文件

 

安裝: (當前版本 12.x)

npm i -D lint-staged

然後在項目根目錄創建文件 .lintstagedrc，配置所需要的規則

比如對暫存區的文件做格式化：

{
  "*.{js,jsx,less,md,json}": [
    "prettier --write"
  ],
  "*.ts?(x)": [
    "prettier --parser=typescript --write",
    "eslint --quiet"
  ]
}

甚至對特定文件執行腳本：

{
  "src/locales/zh-CN.ts": [
    "npm run your-command"
  ]
}

最後通過 Husky 來執行 lint-staged

npx husky add .husky/pre-commit 'npx lint-staged'