歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

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

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

總結

以上是生活随笔為你收集整理的husky7.0.1 + commitlint 配置提交代码检查和规范踩坑指南 广东靓仔的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。