歡迎關注前端早茶，與廣東靚仔攜手共同進階
前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~
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
歡迎關注前端早茶，與廣東靚仔攜手共同進階
前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~