## 為什麼要引入 husky? 雖然我們項目中引入了`prettier`和`eslint`對代碼格式進行了校驗,但是多人開發的時候難免依然會有人提交不符合規範的代碼到倉庫中,如果我們拉取到這種代碼還得慢慢對其進行修改,這是一件很麻煩的事情,同時也為了避免團隊成員提交五花八門message,因此我們 ...
為什麼要引入 husky?
雖然我們項目中引入了prettier和eslint對代碼格式進行了校驗,但是多人開發的時候難免依然會有人提交不符合規範的代碼到倉庫中,如果我們拉取到這種代碼還得慢慢對其進行修改,這是一件很麻煩的事情,同時也為了避免團隊成員提交五花八門message,因此我們可以引入 husky 來從源頭上解決此類問題。簡單來說,husky 可以在我們提交代碼之前校驗我們的代碼是否符合我們配置的規範。接下來就讓我們看一下 husky 的具體使用吧!
husky 的使用
首先安裝
pnpm i husky -D -w
在 package.json 中 scripts 中設置 prepare 鉤子:husky install,在使用pnpm install的時候就會自動執行husky,以便於別人拉取完我們代碼進行pnpm insall的時候直接進行husky install。我們可以使用命令
pnpm pkg set scripts.prepare="husky install"
或者你也可以手動添加
"scripts": {
...
"prepare": "husky install"
},
因為我們沒有執行pnpm install,所以要先執行一下
npx husky install
然後添加一個 commit 鉤子文件
npx husky add .husky/pre-commit "npm run xxx"
然後我們就會發現根目錄出現了.husky/pre-commit 文件,我們修改一下 commit 之前的命令,讓其提交之前先進行 lint 校驗
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run lint:script
pnpm run lint:style
修改一個不符合 eslint 的規範文件,然後進行提交之後你會發現它會先自動給你修複之後再進行提交,如果無法修複則拋出一個錯誤
commitlint 的安裝與使用
我們看開源項目的時候會看到他們代碼提交信息會有諸如feat: 添加xxx,fix: 修複xxxbug之類的信息,其實這些也是有一個規範的,下麵列舉一些常用的 git 提交規範
- build: 編譯相關的修改，例如發佈版本、對項目構建或者依賴的改動
- chore: 其他修改, 比如改變構建流程、或者增加依賴庫、工具等
- ci: 持續集成修改
- docs: 文檔修改
- feat: 新特性、新功能
- fix: 修改 bug
- perf: 優化相關，比如提升性能、體驗
- refactor: 代碼重構
- revert: 回滾到上一個版本
- style: 代碼格式修改, 註意不是 css 修改
- test: 測試用例修改
為了讓我們團隊都使用這些提交規範我們就需要用到commitlint,首先我們需要安裝幾個工具
pnpm install --save-dev @commitlint/config-conventional @commitlint/cli -w
其中 @commitlint/config-conventional 是一個規範配置,標識採用什麼規範來執行消息校驗, 這個預設是 Angular 的提交規範,@commitlint/cli 是一個使用 lint 規則來校驗提交記錄的命令行工具
新建commitlint.config.cjs,這裡可以自定義配置 git 提交的 message 規範
module.exports = {
extends: ['@commitlint/config-conventional']
};
然後在.husky/commit-msg 中添加npx --no -- commitlint --edit "$1"
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no -- commitlint --edit "$1"
然後提交一個不符合規範的 type,就會發現報錯了
正確提交方式應為<type>(<?scope>): <subject>,例如
feat(global): 添加commitlint規範
配置 lint-staged
我們根據上面的配置是可以實現我們想要的效果的,但是我們會發現每次提交代碼的時候 ESlint 或 Stylelint 都會檢查所有文件,而我們需要的是只讓它們檢測新增的文件,因此我們可以使用lint-staged來解決這個問題
首先安裝lint-staged
pnpm add lint-staged -D -w
然後再 package.json 中進行配置
{
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,vue}": [
"eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./",
"stylelint --fix \"packages/components/src/**/*.{css,less}\""
]
},
"scripts": {
"lint-staged": "lint-staged"
},
}
最後修改一下``.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run lint-staged
ok,現在它只會檢測我們添加到暫存區的文件了
完整代碼已經提交到easyest上了,需要的小伙伴可以自取~
最後
如果你對組件庫開發感興趣的話可以掃碼關註公眾號web前端進階,裡面有詳細的搭建過程,記得點贊哦~~
