歡迎關注前端早茶,與廣東靚仔攜手共同進階
前端早茶專注前端,一起結伴同行,緊跟業界發展步伐~
husky 安裝
參考 husky 的README:GitHub husky 小白如果看着有疑問可以跟着我的步驟來:
1、項目內安裝
npm i lint-staged husky -save-dev
復制代碼
2、創建.husky/目錄並指定該目錄為git hooks所在的目錄
在package.json中添加prepare腳本
{
"scripts": { "prepare": "husky install" } } 復制代碼
prepare腳本會在執行npm install之后自動執行。也就是說當我們執行npm install安裝完項目依賴后會執行 husky install命令。
或者采用命令行方式:
注: 需要npm版本Version 7.x(npm set-script命令需要7.x)
npm set-script prepare "husky install" && npm run prepare 復制代碼
3、添加git hooks
創建一條 pre-commit hook
npx husky add .husky/pre-commit "npm run lint" 復制代碼
執行該命令后,會看到.husky/目錄下新增了一個名為pre-commit的shell腳本。
這樣,在之后執行git commit命令時會先觸發pre-commit這個腳本。
pre-commit腳本內容如下:
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run lint 復制代碼
注意:npm run lint
命令根據你自己項目中script腳本而定,eslint --ext .js,.vue src
在lint腳本中
4、規范commit message信息
類似的,我們也可以添加commit-msg鈎子,來規范我們的commit message信息
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 復制代碼
husky 使用
隨便commit一下
git commit -m "feat: pre-commit優化" 復制代碼
創建了 pre-commit hook之后,在每次執行 git commit 或者 git commit --amend時,都會先觸發pre-commit hook,來執行npm run lint中包含的 eslint 等代碼檢測工作。
理論上,這樣就可以有效避免將存在 eslint error 的代碼提交到遠程倉庫了~~~
但是點擊執行后卻報錯了:
> eslint --ext .js,.vue src
not found: commitlint
husky - commit-msg hook exited with code 127 (error) 復制代碼
commitlint 安裝與配置
錯誤提示我們需要安裝安裝 commitlint。
npm i @commitlint/cli @commitlint/config-conventional -D
復制代碼
接下來繼續commit結果又報錯了....害!
> eslint --ext .js,.vue src
⧗ input: feat: pre-commit優化
✖ Please add rules to your `commitlint.config.js` - Getting started guide: https://git.io/fhHij - Example config: https://git.io/fhHip [empty-rules] ✖ found 1 problems, 0 warnings ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint husky - commit-msg hook exited with code 1 (error) 復制代碼
提示可知要配置 commitlint.config.js
於是
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js 復制代碼
ok!~~~大功告成!
關於本文:https://juejin.cn/post/6988116616923840549
歡迎關注前端早茶,與廣東靚仔攜手共同進階
前端早茶專注前端,一起結伴同行,緊跟業界發展步伐~