為什么要引入 husky?

雖然我們項目中引入了prettier和eslint對代碼格式進行了校驗,但是多人開發(fā)的時候難免依然會有人提交不符合規(guī)范的代碼到倉庫中,如果我們拉取到這種代碼還得慢慢對其進行修改,這是一件很麻煩的事情,同時也為了避免團隊成員提交五花八門message,因此我們可以引入 husky 來從源頭上解決此類問題。簡單來說,husky 可以在我們提交代碼之前校驗我們的代碼是否符合我們配置的規(guī)范。接下來就讓我們看一下 husky 的具體使用吧!

husky 的使用

首先安裝

pnpm i husky -D -w

在 package.json 中 scripts 中設置 prepare 鉤子:husky install,在使用pnpm install的時候就會自動執(zhí)行husky,以便于別人拉取完我們代碼進行pnpm insall的時候直接進行husky install。我們可以使用命令

pnpm pkg set scripts.prepare="husky install"

或者你也可以手動添加

 "scripts": {
    ...
    "prepare": "husky install"
  },

因為我們沒有執(zhí)行pnpm install,所以要先執(zhí)行一下

npx husky install

然后添加一個 commit 鉤子文件

npx husky add .husky/pre-commit "npm run xxx"

然后我們就會發(fā)現(xiàn)根目錄出現(xiàn)了.husky/pre-commit 文件,我們修改一下 commit 之前的命令,讓其提交之前先進行 lint 校驗

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm run lint:script
pnpm run lint:style

修改一個不符合 eslint 的規(guī)范文件,然后進行提交之后你會發(fā)現(xiàn)它會先自動給你修復之后再進行提交,如果無法修復則拋出一個錯誤

commitlint 的安裝與使用

我們看開源項目的時候會看到他們代碼提交信息會有諸如feat: 添加xxx,fix: 修復xxxbug之類的信息,其實這些也是有一個規(guī)范的,下面列舉一些常用的 git 提交規(guī)范

• build: 編譯相關的修改，例如發(fā)布版本、對項目構建或者依賴的改動
• chore: 其他修改, 比如改變構建流程、或者增加依賴庫、工具等
• ci: 持續(xù)集成修改
• docs: 文檔修改
• feat: 新特性、新功能
• fix: 修改 bug
• perf: 優(yōu)化相關，比如提升性能、體驗
• refactor: 代碼重構
• revert: 回滾到上一個版本
• style: 代碼格式修改, 注意不是 css 修改
• test: 測試用例修改

為了讓我們團隊都使用這些提交規(guī)范我們就需要用到commitlint,首先我們需要安裝幾個工具

pnpm install --save-dev @commitlint/config-conventional @commitlint/cli -w

其中 @commitlint/config-conventional 是一個規(guī)范配置,標識采用什么規(guī)范來執(zhí)行消息校驗, 這個默認是 Angular 的提交規(guī)范,@commitlint/cli 是一個使用 lint 規(guī)則來校驗提交記錄的命令行工具

新建commitlint.config.cjs,這里可以自定義配置 git 提交的 message 規(guī)范

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"

然后提交一個不符合規(guī)范的 type,就會發(fā)現(xiàn)報錯了

正確提交方式應為<type>(<?scope>): <subject>,例如

feat(global): 添加commitlint規(guī)范

配置 lint-staged

我們根據(jù)上面的配置是可以實現(xiàn)我們想要的效果的,但是我們會發(fā)現(xiàn)每次提交代碼的時候 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,現(xiàn)在它只會檢測我們添加到暫存區(qū)的文件了

完整代碼已經(jīng)提交到easyest上了,需要的小伙伴可以自取~

最后

如果你對組件庫開發(fā)感興趣的話可以掃碼關注公眾號web前端進階,里面有詳細的搭建過程,記得點贊哦~~

文章來源地址http://www.zghlxwxcb.cn/news/detail-469546.html

到了這里，關于從0搭建Vue3組件庫(十三):引入Husky規(guī)范git提交的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！