1. 項(xiàng)目概述為什么Vue開發(fā)者離不開代碼格式化三件套如果你在用VsCode寫Vue還在手動調(diào)整縮進(jìn)、為單引號雙引號糾結(jié)、或者被滿屏的紅色波浪線搞得心煩意亂那說明你的開發(fā)環(huán)境里Vetur、ESLint和Prettier這“三劍客”還沒配置到位或者壓根就沒用起來。這可不是什么可有可無的“花架子”而是直接影響你編碼效率、團(tuán)隊(duì)協(xié)作質(zhì)量甚至項(xiàng)目長期可維護(hù)性的核心工具鏈。簡單來說Vetur是VsCode里專門為Vue單文件組件.vue文件提供語言支持的基石插件沒有它VsCode連.vue文件里的template、script、style都分不清更別提語法高亮、智能提示了。ESLint是一個靜態(tài)代碼檢查工具它像個嚴(yán)格的代碼審查員能發(fā)現(xiàn)你代碼中潛在的錯誤、不規(guī)范的寫法以及不符合團(tuán)隊(duì)約定的風(fēng)格問題。而Prettier是一個“固執(zhí)己見”的代碼格式化工具它不管你的代碼邏輯對不對只負(fù)責(zé)一件事按照預(yù)設(shè)的規(guī)則把代碼排版變得整齊劃一、賞心悅目。很多人以為裝個插件就完事了但實(shí)際用起來才發(fā)現(xiàn)坑不少Vetur和Prettier格式化規(guī)則打架、ESLint報(bào)的錯和Prettier格式化后的結(jié)果沖突、保存時自動格式化沒生效……這些問題背后其實(shí)是這三個工具職責(zé)有交叉但理念不完全相同。這篇文章我就結(jié)合自己從零搭建和維護(hù)多個中大型Vue項(xiàng)目的實(shí)戰(zhàn)經(jīng)驗(yàn)把這套工具鏈的選型思路、配置細(xì)節(jié)、避坑技巧給你徹底講透。目標(biāo)很簡單讓你在VsCode里寫Vue時享受行云流水般的編碼體驗(yàn)代碼既規(guī)范又漂亮把精力完全集中在業(yè)務(wù)邏輯上。2. 核心工具深度解析與選型考量在開始配置之前我們必須先理解每個工具的核心職責(zé)、工作原理以及它們之間的邊界和潛在沖突。盲目安裝和配置只會導(dǎo)致工具間相互“打架”讓你更頭疼。2.1 VeturVue開發(fā)的基石不止于高亮Vetur的核心價(jià)值是讓VsCode能“理解”.vue文件。它基于Language Server ProtocolLSP為.vue文件提供了語法高亮與代碼片段對不同區(qū)塊template, script, style使用不同的高亮方案并提供v-for、v-if等Vue指令的代碼片段。智能感知與補(bǔ)全在template里輸入能提示事件輸入:能提示屬性在script里能提示Vue實(shí)例的data、methods等?；A(chǔ)語法錯誤檢查例如標(biāo)簽未閉合、使用了未定義的指令等。代碼格式化能力Vetur內(nèi)置了利用prettier或prettier-eslint等工具對Vue文件各區(qū)塊進(jìn)行格式化的能力。這是沖突的主要來源之一因?yàn)閂etur可以調(diào)用Prettier而我們通常又會單獨(dú)安裝Prettier插件。實(shí)操心得Vetur是必須安裝的沒有替代品。但它的格式化功能我強(qiáng)烈建議關(guān)閉將格式化的職責(zé)完全交給專門的Prettier插件和ESLint來處理這樣可以避免多套格式化規(guī)則沖突管理起來也更清晰。2.2 ESLint代碼質(zhì)量的守護(hù)者ESLint的核心是定義和檢查規(guī)則。它通過一個配置文件如.eslintrc.js來聲明項(xiàng)目需要遵守哪些規(guī)則。這些規(guī)則分為幾類語法錯誤類如no-unused-vars禁止未使用變量這類規(guī)則能直接避免運(yùn)行時錯誤。最佳實(shí)踐類如prefer-const建議使用const聲明不會被重新賦值的變量提升代碼質(zhì)量。代碼風(fēng)格類如quotes強(qiáng)制使用單引號或雙引號、indent縮進(jìn)規(guī)則。注意這部分功能與Prettier嚴(yán)重重疊是沖突的另一個主要來源。對于Vue項(xiàng)目我們通常不會使用原生的ESLint規(guī)則而是使用社區(qū)為Vue定制的規(guī)則集最主流的是eslint-plugin-vue。它提供了針對Vue模板和腳本的專屬規(guī)則例如vue/html-indent模板縮進(jìn)、vue/attributes-order屬性順序等。2.3 Prettier無情的代碼格式化機(jī)器Prettier的哲學(xué)是“風(fēng)格爭論終結(jié)者”。它提供極少的配置項(xiàng)但關(guān)鍵的都有然后以絕對權(quán)威的方式將你的代碼重新排版。它不關(guān)心你的代碼語義只關(guān)心空格、換行、縮進(jìn)、引號這些“外表”。它的工作流程很簡單你輸入一團(tuán)格式混亂的代碼Prettier進(jìn)行解析 - 轉(zhuǎn)換成AST抽象語法樹 - 完全忽略原格式 - 按照自己的規(guī)則重新打印輸出。這個過程保證了項(xiàng)目里任何開發(fā)者、任何文件輸出格式都完全一致。為什么需要Prettier因?yàn)镋SLint雖然能檢查風(fēng)格但修復(fù)能力有限且慢。Prettier的格式化速度極快且結(jié)果穩(wěn)定可預(yù)期。最佳實(shí)踐是用Prettier管“格式”怎么排版用ESLint管“質(zhì)量”代碼對不對、好不好。2.4 工具鏈協(xié)作模式設(shè)計(jì)理解了各自職責(zé)后理想的協(xié)作模式應(yīng)該是Vetur提供Vue語言支持、智能提示、基礎(chǔ)錯誤檢查。Prettier (VsCode插件)作為主要的格式化執(zhí)行器在保存文件時觸發(fā)負(fù)責(zé)所有代碼.js, .ts, .vue, .css等的最終排版。ESLint (VsCode插件)作為代碼質(zhì)量檢查器實(shí)時在編輯器中顯示錯誤和警告。同時它通過eslint-plugin-prettier插件將自己配置為使用Prettier的規(guī)則來檢查代碼風(fēng)格問題并自動修復(fù)那些ESLint能修復(fù)的問題。這樣當(dāng)你按下保存CtrlS時觸發(fā)的事件鏈?zhǔn)荘rettier插件格式化代碼 - ESLint插件檢查并修復(fù)代碼質(zhì)量問題其中風(fēng)格部分已與Prettier對齊。兩者通過eslint-config-prettier禁用與Prettier沖突的ESLint規(guī)則和eslint-plugin-prettier將Prettier作為ESLint規(guī)則運(yùn)行實(shí)現(xiàn)完美融合。3. 從零開始的環(huán)境配置與集成實(shí)戰(zhàn)理論講完我們進(jìn)入實(shí)戰(zhàn)環(huán)節(jié)。假設(shè)你有一個新的Vue 3項(xiàng)目使用Vite或Vue CLI創(chuàng)建我們來一步步配置這套工具鏈。3.1 基礎(chǔ)環(huán)境與插件安裝首先確保你的VsCode已安裝以下插件Vetur(作者Pine Wu)ESLint(作者M(jìn)icrosoft)Prettier - Code formatter(作者Prettier)在VsCode的擴(kuò)展商店搜索并安裝即可。安裝后建議重啟一下VsCode以確保插件完全加載。3.2 項(xiàng)目級依賴安裝與配置初始化在你的Vue項(xiàng)目根目錄下打開終端安裝必要的npm包。這里我們采用目前最主流和推薦的組合。# 安裝ESLint及其相關(guān)依賴 npm install eslint eslint-plugin-vue typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev # 安裝Prettier及其與ESLint集成的插件 npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev依賴包說明eslint: ESLint核心庫。eslint-plugin-vue: Vue.js的ESLint插件提供Vue專屬規(guī)則。typescript-eslint/parsertypescript-eslint/eslint-plugin: 如果你的項(xiàng)目使用TypeScript則需要這兩個包來解析和檢查TS語法。純JavaScript項(xiàng)目可省略。prettier: Prettier核心庫。eslint-config-prettier: 用于關(guān)閉所有與Prettier沖突的ESLint規(guī)則。eslint-plugin-prettier: 將Prettier作為ESLint規(guī)則來運(yùn)行這樣ESLint就能用Prettier來檢查和修復(fù)格式問題。接下來在項(xiàng)目根目錄創(chuàng)建關(guān)鍵的配置文件。1. 創(chuàng)建ESLint配置文件.eslintrc.cjs(或.eslintrc.js) 如果你的項(xiàng)目是ES模塊package.json中type: module使用.cjs擴(kuò)展名確保它被當(dāng)作CommonJS模塊加載。// .eslintrc.cjs module.exports { // 指定ESLint的解析器Vue文件需要用到vue-eslint-parser它本身會調(diào)用typescript-eslint/parser parser: vue-eslint-parser, // 解析器選項(xiàng) parserOptions: { parser: typescript-eslint/parser, // 解析script標(biāo)簽中的內(nèi)容 ecmaVersion: latest, // 使用最新的ECMAScript標(biāo)準(zhǔn) sourceType: module // 使用ES模塊 }, // 擴(kuò)展的規(guī)則集 extends: [ // 1. 優(yōu)先使用 eslint-plugin-vue 提供的 Vue 3 推薦規(guī)則 plugin:vue/vue3-recommended, // 2. 使用 typescript-eslint 推薦的 TypeScript 規(guī)則 (如果是JS項(xiàng)目可替換為 eslint:recommended) plugin:typescript-eslint/recommended, // 3. 使用 eslint-plugin-prettier 推薦的規(guī)則并將 prettier 錯誤作為 ESLint 錯誤顯示 // 注意這個必須放在最后因?yàn)樗鼤采w前面的樣式規(guī)則 plugin:prettier/recommended ], // 自定義規(guī)則可以覆蓋 extends 中的規(guī)則 rules: { // 例如關(guān)閉組件名必須多單詞的規(guī)則Vue 3單文件組件默認(rèn)規(guī)則 vue/multi-word-component-names: off, // 你可以在這里添加或覆蓋任何規(guī)則 // typescript-eslint/no-unused-vars: warn } }2. 創(chuàng)建Prettier配置文件.prettierrc 這個文件定義你的代碼風(fēng)格。配置項(xiàng)不多但很關(guān)鍵。{ semi: false, // 句尾不加分號 singleQuote: true, // 使用單引號 printWidth: 100, // 每行代碼最大長度 trailingComma: none, // 對象或數(shù)組末尾不加逗號 tabWidth: 2, // 一個Tab等于2個空格 useTabs: false, // 使用空格縮進(jìn) bracketSpacing: true, // 對象字面量的大括號間有空格 { foo: bar } arrowParens: avoid, // 箭頭函數(shù)單個參數(shù)時省略括號 x x endOfLine: auto // 換行符根據(jù)系統(tǒng)自動檢測 }3. 創(chuàng)建VsCode工作區(qū)配置文件.vscode/settings.json 這是控制VsCode行為的核心將上述工具集成到編輯器中。{ // 指定哪些文件由Vetur處理 vetur.validation.template: true, vetur.validation.script: true, vetur.validation.style: true, // 關(guān)鍵關(guān)閉Vetur的格式化功能全部交給Prettier vetur.format.enable: false, // 使用項(xiàng)目根目錄的prettier配置文件 prettier.configPath: .prettierrc, // 保存時自動格式化由Prettier插件執(zhí)行 editor.formatOnSave: true, // 默認(rèn)格式化工具選擇Prettier editor.defaultFormatter: esbenp.prettier-vscode, // 針對Vue文件也指定使用Prettier作為格式化工具 [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, // 針對JavaScript/TypeScript文件同樣指定Prettier [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, // 啟用ESLint插件并指定其校驗(yàn)的文件類型 eslint.validate: [ javascript, javascriptreact, typescript, typescriptreact, vue, html ], // 保存時自動執(zhí)行ESLint的--fix進(jìn)行修復(fù) editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, // 關(guān)閉VsCode自帶的基于文件類型的驗(yàn)證避免與ESLint沖突 javascript.validate.enable: false, typescript.validate.enable: false }3.3 配置解析與關(guān)鍵點(diǎn)說明這套配置的核心邏輯在于“職責(zé)分離”和“執(zhí)行順序”。職責(zé)分離Vetur只做語言服務(wù)高亮、提示、基礎(chǔ)驗(yàn)證不做格式化vetur.format.enable: false。Prettier插件作為所有文件的defaultFormatter獨(dú)攬格式化大權(quán)。ESLint插件負(fù)責(zé)代碼質(zhì)量檢查并通過eslint-plugin-prettier將Prettier規(guī)則納入自己的檢查范圍。執(zhí)行順序 當(dāng)你保存一個.vue文件時首先editor.formatOnSave觸發(fā)esbenp.prettier-vscode插件根據(jù).prettierrc規(guī)則對文件進(jìn)行重新格式化。緊接著editor.codeActionsOnSave觸發(fā)source.fixAll.eslint命令執(zhí)行。ESLint插件會掃描代碼此時對于代碼質(zhì)量錯誤如未使用變量它會嘗試自動修復(fù)。對于代碼風(fēng)格問題因?yàn)閑slint-plugin-prettier的存在它實(shí)際上是用Prettier的規(guī)則在檢查。但由于第一步Prettier剛剛格式化過所以理論上這里不會再出現(xiàn)格式錯誤。如果出現(xiàn)說明有ESLint規(guī)則和Prettier沖突了這正是eslint-config-prettier要解決的問題。.eslintrc.cjs中extends的順序很重要‘plugin:prettier/recommended’必須放在最后。因?yàn)樗隽藘杉?) 啟用eslint-plugin-prettier2) 繼承eslint-config-prettier。放在最后可以確保它能夠正確覆蓋前面所有規(guī)則集中可能與Prettier沖突的樣式規(guī)則。4. 高級配置、場景化調(diào)優(yōu)與疑難排解基礎(chǔ)配置能解決80%的問題但面對復(fù)雜項(xiàng)目、特殊依賴或團(tuán)隊(duì)個性化要求時還需要進(jìn)一步調(diào)優(yōu)。4.1 處理Vue模板中的HTML、CSS和預(yù)處理語言Vue單文件組件包含了多種語言。Prettier和ESLint如何知道如何處理它們呢HTML (template部分)Prettier內(nèi)置了HTML格式化支持。對于Vue模板特有的語法如v-bind、v-onPrettier也能很好地處理。eslint-plugin-vue的規(guī)則如vue/html-indent會被eslint-config-prettier禁用避免沖突。CSS/SCSS/Less (style部分)Prettier同樣內(nèi)置了對這些樣式的格式化支持。你需要確保.prettierrc的配置符合你的樣式偏好。對于SCSS/LessPrettier會自動識別style lang“scss”并應(yīng)用相應(yīng)格式化。TypeScript (script部分)如前所述通過typescript-eslint/parserESLint可以理解TS語法。Prettier對TS的格式化也是開箱即用的。一個常見問題當(dāng)script使用setup語法糖時ESLint可能會報(bào)一些關(guān)于defineProps、defineEmits未定義的錯誤。這是因?yàn)檫@些宏是編譯時聲明的。解決方案是在ESLint配置中告訴它這些是全局的// .eslintrc.cjs module.exports { // ... 其他配置 globals: { defineProps: readonly, defineEmits: readonly, defineExpose: readonly, withDefaults: readonly } }4.2 與舊項(xiàng)目或特定代碼風(fēng)格的兼容如果你的項(xiàng)目是遺留項(xiàng)目或者團(tuán)隊(duì)有強(qiáng)烈的個性化代碼風(fēng)格比如就是喜歡雙引號、結(jié)尾分號配置的核心在于調(diào)整.prettierrc和.eslintrc.cjs中的rules。調(diào)整Prettier規(guī)則直接修改.prettierrc文件。例如要使用雙引號和分號{ semi: true, singleQuote: false, // ... 其他配置 }調(diào)整ESLint規(guī)則在.eslintrc.cjs的rules字段中覆蓋。例如如果你想強(qiáng)制要求函數(shù)名后有一個空格function foo() {}但Prettier不關(guān)心這個你可以啟用ESLint的space-before-function-paren規(guī)則rules: { space-before-function-paren: [error, always], // ... 其他規(guī)則 }注意確保你啟用的ESLint風(fēng)格規(guī)則不與Prettier的格式化輸出沖突。最好在配置后運(yùn)行npx eslint --fix .和npx prettier --write .看看是否有無法自動解決的沖突。4.3 性能優(yōu)化與大型項(xiàng)目配置在大型項(xiàng)目中對node_modules或dist目錄進(jìn)行ESLint/Prettier檢查是毫無意義且耗時的。我們需要創(chuàng)建忽略文件。1. 創(chuàng)建ESLint忽略文件.eslintignorenode_modules/ dist/ build/ *.min.js coverage/2. 創(chuàng)建Prettier忽略文件.prettierignore 通?？梢灾苯訌?fù)制.gitignore的內(nèi)容并加上一些額外項(xiàng)node_modules dist build coverage *.log .DS_Store3. 使用緩存提升ESLint速度 在.eslintrc.cjs中啟用緩存可以顯著提升后續(xù)檢查速度。module.exports { // ... 其他配置 cache: true, // 啟用緩存 cacheLocation: node_modules/.cache/.eslintcache // 緩存位置 }4.4 常見問題排查實(shí)錄即使配置正確在實(shí)際使用中也可能遇到各種“詭異”問題。這里記錄幾個我踩過的坑和解決方案。問題1保存時格式化不生效或者只格式化了一部分文件。檢查1打開VsCode的輸出面板CtrlShiftU選擇“Prettier”或“ESLint”頻道查看保存時是否有錯誤日志。常見錯誤是找不到配置文件請確認(rèn).prettierrc和.eslintrc.cjs在項(xiàng)目根目錄且格式正確。檢查2確認(rèn)文件是否被.prettierignore或.eslintignore忽略。檢查3右鍵點(diǎn)擊編輯器內(nèi)容選擇“使用...格式化文檔”看看默認(rèn)格式化工具是不是Prettier。如果不是說明[vue]或默認(rèn)格式化器設(shè)置沒生效檢查.vscode/settings.json。檢查4確保沒有其他VsCode插件如“Beautify”在干擾?？梢越闷渌袷交寮囋嚒栴}2ESLint和Prettier規(guī)則沖突保存后代碼來回變動格式抖動。這是最典型的問題表現(xiàn)為保存一次代碼變一個樣。根源某條ESLint規(guī)則和Prettier的格式化規(guī)則在“爭奪”同一處代碼的控制權(quán)。解決方案確保eslint-config-prettier已正確安裝并在.eslintrc.cjs的extends中最后引入。運(yùn)行命令檢查沖突npx eslint --print-config src/App.vue | npx eslint-config-prettier-check。這個命令會列出所有與Prettier沖突的ESLint規(guī)則。根據(jù)提示在.eslintrc.cjs的rules中手動關(guān)閉這些沖突的規(guī)則設(shè)置為off。但更常見的做法是確保extends順序正確讓eslint-config-prettier自動禁用它們。問題3Vetur提示“找不到模塊‘vue’”或類型錯誤。原因Vetur的語言服務(wù)可能沒有正確識別項(xiàng)目類型Vue 2/3或TS配置。解決在項(xiàng)目根目錄創(chuàng)建vetur.config.js文件明確配置module.exports { settings: { vetur.useWorkspaceDependencies: true, vetur.experimental.templateInterpolationService: true }, projects: [ { root: ./, tsconfig: ./tsconfig.json, // 如果你的項(xiàng)目有tsconfig package: ./package.json } ] }在VsCode設(shè)置中搜索vetur completion auto-import可以嘗試開啟或關(guān)閉。重啟VsCode或Vetur語言服務(wù)命令面板運(yùn)行Vetur: Restart VLS。問題4在Vue模板中HTML標(biāo)簽屬性換行格式不符合預(yù)期。Prettier對于HTML/XML的格式化有自己的一套算法。如果你希望屬性在超過一定長度時換行可以配置.prettierrc{ // ... 其他配置 vueIndentScriptAndStyle: false, // 是否縮進(jìn)script和style標(biāo)簽內(nèi)的內(nèi)容 htmlWhitespaceSensitivity: ignore // 如何處理HTML中的空白敏感內(nèi)容 }但請注意Prettier對HTML的格式化控制粒度不如專門的HTML格式化工具細(xì)有時需要團(tuán)隊(duì)適應(yīng)其風(fēng)格。5. 團(tuán)隊(duì)協(xié)作與工程化集成建議個人開發(fā)環(huán)境配好了如何保證團(tuán)隊(duì)每個成員、以及CI/CD流程中的代碼一致性呢5.1 鎖定工具版本與共享配置1. 版本鎖定在package.json中不要使用^或~來安裝這些工具避免因版本升級導(dǎo)致規(guī)則或行為變化造成團(tuán)隊(duì)間的不一致。{ devDependencies: { eslint: 8.57.0, prettier: 3.2.5, eslint-plugin-vue: 9.26.0, // ... 其他依賴也盡量鎖定版本 } }2. 配置共享將.eslintrc.cjs、.prettierrc、.vscode/settings.json、.eslintignore、.prettierignore等配置文件納入版本控制Git。這樣所有團(tuán)隊(duì)成員拉取代碼后就擁有了一致的規(guī)則基礎(chǔ)。3. VsCode設(shè)置同步可選但推薦鼓勵團(tuán)隊(duì)成員使用VsCode的“設(shè)置同步”功能或者將工作區(qū)推薦擴(kuò)展列表保存在.vscode/extensions.json中// .vscode/extensions.json { recommendations: [ vue.volar, dbaeumer.vscode-eslint, esbenp.prettier-vscode ] }團(tuán)隊(duì)成員打開項(xiàng)目時VsCode會提示安裝這些推薦插件。5.2 集成到Git工作流與CI/CD1. 添加npm腳本在package.json的scripts中添加lint和format命令。{ scripts: { lint: eslint . --ext .js,.ts,.vue --fix, // 檢查并自動修復(fù) lint:check: eslint . --ext .js,.ts,.vue, // 僅檢查不修復(fù) format: prettier --write ., // 格式化所有文件 format:check: prettier --check . // 檢查哪些文件不符合格式 } }2. 配置Git提交前鉤子Husky lint-staged 這是保證代碼庫一致性的黃金標(biāo)準(zhǔn)。它確保提交到倉庫的代碼都是經(jīng)過格式化和檢查的。安裝工具npm install husky lint-staged --save-dev初始化Huskynpx husky init在package.json中配置lint-staged{ lint-staged: { *.{js,ts,vue}: [ prettier --write, eslint --fix ], *.{json,md,css,scss}: [ prettier --write ] } }修改.husky/pre-commit鉤子文件#!/usr/bin/env sh . $(dirname -- $0)/_/husky.sh npx lint-staged現(xiàn)在每次執(zhí)行g(shù)it commit時lint-staged會自動對暫存區(qū)staged的文件依次執(zhí)行Prettier格式化和ESLint修復(fù)。只有它們都通過提交才會成功。3. 集成到CI/CD流水線 在GitLab CI、GitHub Actions等CI/CD腳本中加入檢查步驟確保合并請求Merge Request中的代碼符合規(guī)范。# 例如 GitHub Actions 的一個 job lint-and-format: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 - run: npm ci - run: npm run lint:check # 如果發(fā)現(xiàn)錯誤CI會失敗 - run: npm run format:check # 如果發(fā)現(xiàn)未格式化的文件CI會失敗5.3 處理特殊文件與自定義規(guī)則有時你需要對某些特定文件或目錄應(yīng)用不同的規(guī)則。1. 覆蓋特定文件的Prettier配置 可以在項(xiàng)目子目錄中創(chuàng)建另一個.prettierrc文件其規(guī)則會覆蓋上級目錄的配置。或者在.prettierrc中使用overrides字段Prettier 2.0支持{ semi: false, singleQuote: true, overrides: [ { files: *.md, options: { printWidth: 80, proseWrap: always } } ] }2. 禁用特定文件的ESLint檢查在文件頂部使用注釋禁用整個文件的ESLint檢查/* eslint-disable */ // 這個文件的所有ESLint規(guī)則都被禁用禁用下一行的特定規(guī)則// eslint-disable-next-line no-console console.log(‘這行代碼不會觸發(fā)no-console規(guī)則報(bào)警’);在.eslintrc.cjs中使用overrides字段module.exports { // ... 根配置 overrides: [ { files: [‘src/libs/legacy-*.js’], rules: { ‘no-var’: ‘off’ // 在這個匹配的文件中關(guān)閉 no-var 規(guī)則 } } ] };6. 從Vetur遷移到Volar的考量近年來另一個Vue語言支持插件Volar迅速崛起官方也推薦Vue 3項(xiàng)目使用Volar而非Vetur。這里簡要分析一下區(qū)別和遷移考量。Volar vs VeturVetur基于“每個語言一個服務(wù)”的傳統(tǒng)LSP模式將.vue文件拆解成HTML、CSS、JS分別交給對應(yīng)的語言服務(wù)處理然后再組合。這在處理Vue 3的script setup等新特性時有時會力不從心類型支持不夠完美。Volar為Vue單文件組件量身定制的語言服務(wù)將其作為一個整體來處理對TypeScript和Vue 3新特性的支持更加精準(zhǔn)和強(qiáng)大尤其是模板內(nèi)的類型推斷和組件props類型檢查。遷移建議新項(xiàng)目Vue 3項(xiàng)目強(qiáng)烈建議直接使用Volar。你需要禁用或卸載Vetur安裝Volar插件Vue - Official?，F(xiàn)有項(xiàng)目如果使用Vetur沒有遇到無法解決的類型提示或模板支持問題可以暫不遷移。Vetur對Vue 3的支持也在持續(xù)改進(jìn)。遷移步驟安裝“Vue - Official”插件即Volar。禁用或卸載“Vetur”插件。在VsCode設(shè)置中可能需要將[vue]的默認(rèn)格式化工具重新指定為Prettier。Volar有更好的性能但配置邏輯與Vetur略有不同例如它通過vue-tsc進(jìn)行類型檢查你可能需要在package.json中添加vue-tsc --noEmit作為類型檢查腳本。無論選擇Vetur還是VolarESLint和Prettier的配置和集成方式都是完全一致的因?yàn)樗鼈冏饔糜诖a層面與底層的語言服務(wù)插件是解耦的。這套以ESLint和Prettier為核心輔以高效語言服務(wù)插件的工具鏈?zhǔn)潜Ｕ犀F(xiàn)代Vue項(xiàng)目開發(fā)體驗(yàn)和代碼質(zhì)量的基石?；〞r間把它配置順暢絕對是一筆高回報(bào)的投資。