husky7.0.1 + commitlint 配置提交代碼檢查和規范踩坑指南


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

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

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

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM