從0搭建Vue3組件庫(十三):引入Husky規範git提交

来源:https://www.cnblogs.com/zdsdididi/archive/2023/06/03/17453936.html
-Advertisement-
Play Games

## 為什麼要引入 husky? 雖然我們項目中引入了`prettier`和`eslint`對代碼格式進行了校驗,但是多人開發的時候難免依然會有人提交不符合規範的代碼到倉庫中,如果我們拉取到這種代碼還得慢慢對其進行修改,這是一件很麻煩的事情,同時也為了避免團隊成員提交五花八門message,因此我們 ...


為什麼要引入 husky?

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

husky 的使用

首先安裝

pnpm i husky -D -w

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

pnpm pkg set scripts.prepare="husky install"

或者你也可以手動添加


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

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

npx husky install

然後添加一個 commit 鉤子文件

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

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

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

pnpm run lint:script
pnpm run lint:style

修改一個不符合 eslint 的規範文件,然後進行提交之後你會發現它會先自動給你修複之後再進行提交,如果無法修複則拋出一個錯誤

commitlint 的安裝與使用

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

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

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

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

其中 @commitlint/config-conventional 是一個規範配置,標識採用什麼規範來執行消息校驗, 這個預設是 Angular 的提交規範,@commitlint/cli 是一個使用 lint 規則來校驗提交記錄的命令行工具

新建commitlint.config.cjs,這裡可以自定義配置 git 提交的 message 規範

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"

然後提交一個不符合規範的 type,就會發現報錯了

image.png

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

feat(global): 添加commitlint規範

配置 lint-staged

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

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

最後

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • nginx.conf中有關訪客日誌定義如下 #log_format #創建日誌格式,名為main log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$h ...
  • 上周聽到公司同事分享 MySQL 同步數據到 ES 的方案,發現很有意思,感覺有必要將這塊知識點再總結提煉一下,就有了這篇文章。 本文會先講述數據同步的 4 種方案,並給出常用數據遷移工具,乾貨滿滿! 不 BB,上文章目錄: 1. 前言 在實際項目開發中,我們經常將 MySQL 作為業務資料庫,ES ...
  • 具象化理解資料庫的三級模式及二級映像 形象一點來說,把數據看做貨物,資料庫是倉庫,模式就是表格。 你有一個倉庫,倉庫里成千上萬的貨物,隨便你怎麼堆,你堆個正方體,堆個圓柱體,甚至隨便亂堆都行,你怎麼堆的叫內模式。 完事你寫了一張表,表上對全部貨物按某個標準分類,而且標清了啥貨物在哪(這個操作就是從內 ...
  • MySQL索引長度(key_len)計算 計算規則 索引欄位:沒有設置 NOT NULL,則需要加 1 個位元組。 定長欄位:tinyint 占 1 個位元組、int 占 4個位元組、bitint 占 8 個位元組、date 占 3個位元組、datetime 占 5 個位元組、char(n) 占 n 個位元組。 ...
  • ![](https://img2023.cnblogs.com/blog/3076680/202306/3076680-20230602231102469-1389179464.png) # 1. 基礎思想 ## 1.1. 預寫日誌記錄 ## 1.2. 兩階段提交 ## 1.3. 關係資料庫 # 2 ...
  • 有很多朋友對中國文化歷史相關的數據感興趣,現有的中華上下五千年、世界五千年這類的數據記錄數還太少太少,於是今天就採集了一個中華歷史網站,共有效採集到近8萬條記錄。 分類彙總情況:野史秘聞(12273)、歷史人物(8840)、歷史雜談(7928)、文史百科(5635)、歷史趣聞(5282)、雜說歷史( ...
  • 原文地址: [Android Studio歷史版本下載地址彙總 - Stars-One的雜貨小窩](https://stars-one.site/2023/06/03/android-studio-version-list) > 由於新公司不給自帶電腦,然後給了台新的電腦,於是就是需要重新下載And ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 所謂數據可視化,我們可以理解為從巨集觀角度來看一眼就能看出來整個數據的占比,走向。對於數據可視化,很多互聯網公司是很看重這一塊的,包括大廠;就比如阿裡的淘寶,雙十一的時候往往就需要將消費者的一些數據通過圖的形式展現出來。接下來我們就來 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...