為什么要引入 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前端進階,里面有詳細的搭建程序,記得點贊哦~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554238.html
標籤：其他
上一篇：記錄--手把手教你Vue+ECharts+高德地圖API實作天氣預報資料可視化
下一篇：返回列表