無星的前端之旅（二十三）—— 手把手教你配置git hook

背景

要求對git的message作限制，要求要以

['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'revert', 'types']:

作開頭標記

思路

git存在hook，在每一個步驟後面都會執行對應的🪝

所以咱們能夠考慮經過git hook去完成這項校驗

實際上，在平時的開發過程當中，就已經有於此相關的內容了，就是不知道同窗們留意到沒有

舉個🌰

好比在Vue項目中，若是在建立項目中，選擇了eslint，並選擇了保存並格式化

在進行git commit時，代碼會自動作一次格式化。

究其緣由，其實是來自Vue的默認配置

那麼Vue是怎麼作的，實際上，翻開文檔，咱們可以找到相關內容

git-hook

其實是尤🌧️溪 fork 了 husky，稍作改造造成了yorkie

可是咱們能夠看到，yorkie已經好久沒有更新了，而且沒有文檔，想要直接使用yorkie是比較困難的

所以咱們回到最初的庫，husky

husky

husky自己也是一個久負盛名的庫，專一於git hook

那麼就讓咱們來集成它，完成咱們的需求

集成

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2
複製代碼

集成之後，項目依賴會添加husky，且項目根目錄下會添加.husky文件夾

編寫hook

.husky文件夾下，默認添加了一個pre-commit的hook文件

pre-commit

咱們能夠先將Vue的默認配置轉移進去

pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
git add .
複製代碼

而後移除package.json中的gitHooks屬性

新增其餘hook

npx husky add [fileName]
# 若是沒有其餘config上的變更，能夠理解爲照着以下寫法寫
# npx husky add .husky/hooks名稱
複製代碼

舉個🌰

npx husky add .husky/commit-msg
複製代碼

git hooks名稱和做用

可能有些旁友不知道有哪些hook能夠添加，我這裏教你們怎麼看

• git 文檔

• 直接查看.git文件夾中hooks內容

完成需求

1.添加commit-msg

npx husky add .husky/commit-msg
複製代碼

2.正則編寫

commit-msg內容：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

MSG=`awk '{printf("%s",$0)}' $1`
echo $MSG
if [[ $MSG =~ ^(feat|fix|docs|style|refactor|perf|test|build|ci|revert|types):.*$ ]]
then
    echo '成功'
else
    echo '失敗'
fi
複製代碼

額外內容

不夠保險

由於上述行爲的hook是在項目中作的

換句話說是在開發成員的本地電腦上作的

一旦開發人員不爽，把hook刪了，那就無從約束

因此更保險的方式，應該是由git平臺上去作檢測

僅測試hook

能夠在hook文件的最後添加

exit 1
複製代碼

會停止本次git行爲

test-hooks

commitlint

commitlint，見名知意，commit內容的lint

咱們能夠使用其中的風格和工具作拓展

好比咱們這裏選擇集成以下工具和風格

@commitlint/cli
@commitlint/config-conventional
複製代碼

若是須要達成上述需求，咱們能夠這麼作

• 根目錄下新建commitlint.config.js文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'revert', 'types'],
    ],
  },
}

複製代碼

• commit-msg內容

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit $1

複製代碼

Done