工程中集成 husky、lint-staged、commitlint

最近在建立一個 webpack5+vue3+typescript+tsx 的一個vue工程，打算用來重構 vue-code-diff

原由

打算在代碼提交時，進行 commit 信息格式以及提交內容的代碼格式校驗，防止出現代碼風格和 commit 信息不統一問題，也爲後期建立 change-logs 作準備。

添加依賴

yarn add husky lint-staged @commitlint/cli @commitlint/config-angular -D
複製代碼

• husky: 提供githook，例如，咱們輸入完 git commit -m 'xxxx' 後，就會觸發 commit-msg鉤子，就能夠對 xxxx 內容進行咱們規定的格式校驗了。
• @commitlint/cli: 上面咱們提到對 xxxx 進行格式校驗用的就是這個組件。
• @commitlint/config-angular: 這個是 angular 的校驗風格，我直接使用了這個。若是想自定義的話能夠用 @commitlint/config-conventional 組件。
• lint-staged: 主要做用是隻校驗咱們提交(git add .)的文件代碼格式，而不是去校驗全部的文件的格式，能夠提升校驗效率，否則項目大了以後，校驗下數據格式估計就是5~6分鐘了。

實戰

先說一個坑，husky 在升級到6.0.0以後，改動極大。我最開始安裝，配置完以後徹底沒法觸發 git 的 hook 。最後去查看官方文檔，才發現如今網上的 husky 配置都是比較舊的，徹底不能使用。

接下來咱們一步步操做。

Enable Git hooks

這個 install 不是組件安裝，而是至關於註冊 husky-hook 到 git 上面。

npx husky install
npm set-script prepare "husky install"
# 上面那行執行完以後會在 package 添加 "prepare": "husky install"，目前不知道幹啥用的。
複製代碼

運行完上面的命令，工程下面會出現一個 .husky 文件夾，裏面就是 hook shell，能夠查看 .git/config 文件，發現多了下面的第8行。

[core]
	bare = false
	repositoryformatversion = 0
	filemode = true
	ignorecase = true
	precomposeunicode = true
	logallrefupdates = true
	hooksPath = .husky
[remote "origin"]
	url = https://github.com/xxxxx.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
	remote = origin
	merge = refs/heads/master
[branch "v2.0.0"]
	remote = origin
	merge = refs/heads/v2.0.0
複製代碼

建立 hook

npx husky add .husky/pre-commit "npm test"
複製代碼

後面的 npm test 是鉤子觸發的時候，會運行的命令。 如今能夠在工程下面的 .husky 文件架內多了一個 pre-commit 文件，內容爲

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

npm test
複製代碼

如今是否是對新版的 husky 使用有了相關的瞭解了。 接下來咱們把 lint-staged、commitlint 加上

commitlint

工程目錄下建立 commitlint.config.js

module.exports = {
  extends: [
    "@commitlint/config-angular"
  ]
};
複製代碼

運行命令

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

修改建立的 commit-msg 文件內容爲

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

npx --no-install commitlint --edit $1
複製代碼

關於以前的 HUSKY_GIT_PARAMS 已經用 $1 $2代替了。具體能夠點擊 HUSKY_GIT_PARAMS 查看

lint-staged

在工程目錄下建立 .lintstagedrc.json 文件

{
  "src/**/*.{js,json,vue,ts,tsx}": [
    "eslint --fix"
  ]
}
複製代碼

還記得咱們最開始實驗室建立的 pre-commit 文件嗎？直接修改他，刪掉 npm test

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

npx --no-install lint-staged
複製代碼

結束

看到這裏，你的工程已經添加了對應的 git hook，若是還有問題，能夠刪除 .git/hooks/ 下面的 pre-commit 和 commit-msg 文件再試試。 新版的 husky 改動仍是很大的，把以前鉤子從 .git/hooks 移出來，專門放在了一個文件夾內，因此致使了舊項目升級了 husky ，鉤子就不起做用了。