Vue3基于husky的代碼檢查工作流
husky是一個(gè)git hooks工具（git的鉤子工具，可以在特定時(shí)機(jī)執(zhí)行特定的命令）
代碼檢查
背景：想要使代碼上傳到git倉庫前進(jìn)行代碼檢查，所以提前下載好git
打開項(xiàng)目終端，點(diǎn)擊右上角選擇進(jìn)入Git Bash控制
1.如果當(dāng)前項(xiàng)目沒有被git進(jìn)行管理，就需要先初始化git倉庫，執(zhí)行g(shù)it init即可；如果不初始化直接進(jìn)行husky處理肯定是不行的
git init
2.初始化husky工具配置
官網(wǎng)：https://typicode.github.io/husky/
pnpm dlx husky-init&&pnpm install
配置成功后，會(huì)出現(xiàn).husky文件，可以點(diǎn)進(jìn)pre-commit文件查看
3.修改.husky/pre-commit文件
將npm test修改為pnpm lint，只要一提交代碼就會(huì)觸發(fā)這個(gè)pnpm lint（代碼校驗(yàn)）
如果項(xiàng)目中有代碼不符合規(guī)范，在提交到倉庫時(shí)就會(huì)有報(bào)錯(cuò)提示
問題：pnpm lint是全量檢查，耗時(shí)問題（文件量大時(shí)），歷史問題（前期代碼并沒有使用規(guī)范）
暫存區(qū)eslint校驗(yàn)（解決上面問題，企業(yè)級(jí)項(xiàng)目更常用）
只用對(duì)自己寫的代碼負(fù)責(zé)
1.安裝lint-staged包
pnpm i lint-staged -D
2.package.json配置lint-staged命令
在圖中紅色區(qū)域里添加如下代碼：
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}"lint-staged": "lint-staged"
3..husky/pre-commit文件修改
將pnpm lint修改為pnpm lint-staged
到此這篇關(guān)于Vue3-基于husky的代碼檢查工作流的文章就介紹到這了,更多相關(guān)Vue3代碼檢查工作流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
v-for是vue的循環(huán)指令,作用是遍歷數(shù)組(對(duì)象)的每一個(gè)值,這篇文章主要給大家介紹了關(guān)于Vue中v-for的9種使用案例的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說說服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下2018-08-08
關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問題及解決辦法,本文給大家分享問題所在原因及解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06
如何使用sm4js進(jìn)行加密和國(guó)密sm4總結(jié)
近期由于公司項(xiàng)目的需要開始研究國(guó)密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國(guó)密sm4的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue樹形控件tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文通過實(shí)例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09
vue3向數(shù)組插入一條自定義數(shù)據(jù)實(shí)現(xiàn)方式
這篇文章主要介紹了vue3向數(shù)組插入一條自定義數(shù)據(jù)實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-09-09
Element InfiniteScroll無限滾動(dòng)的具體使用方法
這篇文章主要介紹了Element InfiniteScroll無限滾動(dòng)的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了.eslintrc配置目錄及配置項(xiàng)的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10