1. 项目概述VUE3开发中VsCode为什么需要插件自己平时的工作流里VsCode是电脑上打开频率最高的软件而最近两年帮团队搭VUE3项目、带新人、审代码的过程中我发现一个很有意思的现象很多人装了一堆插件结果该有的提示没有该报的错不报还有的人一个插件没装天天切回终端手动跑命令。如果你在用VsCode开发VUE3项目但还没有一套稳定的插件组合那这篇文章就是给你准备的。以前写VUE2的时候Vetur一个插件基本能走天下语法高亮、补全、格式化都有。但VUE3出来之后整个编译链路换成了Vue Compiler TypeScriptVetur已经跟不上趟了必须用Volar这套新体系。更麻烦的是VUE3的项目往往同时涉及TypeScript、ESLint、Prettier、Vite、Vue Router、Pinia还有各种各样的路径别名光靠编辑器原生功能完全不够用。插件列表看上去很长但真正需要安装和配置的核心插件其实固定在十个以内。在展开插件清单之前先说一个容易踩的坑插件装得多不等于开发效率高。插件一旦超过二十个VsCode的启动速度和CPU占用都会明显上升而且很容易出现语法检查冲突、代码格式化打架、跳转指向错误文件。所以这篇内容不只是列插件重点是把每个插件解决什么问题、和什么场景匹配、配置里面有哪些坑讲清楚帮你搭出一套克制、好用、可持续维护的VsCode插件环境。阅读对象包括正在入门VUE3的前端新人、准备把旧项目升级到VUE3的团队以及想优化自己日常开发工具链的熟练开发者。2. 插件选型思路为什么这套组合适合VUE32.1 VUE3独有的技术变化决定了插件方向VUE3相比VUE2的最大区别是全面拥抱TypeScript以及组件的编译时优化。VUE2时代的模板编译结果就是render函数类型检查和代码提示都停留在字符串级别VUE3则不同单文件组件里的模板部分会被单独编译成虚拟DOM描述并且可以做类型推断。这意味着编辑器需要能读取.env.d.ts、tsconfig.json、vue文件的script块然后把这些信息统一注入到模板表达式里。Volar就是这个体系下的产物它本质上是一个语言服务不是一个简单的语法高亮插件。比如你在VUE3的template里写了{{ userInfo.name }}如果userInfo没有定义name属性Volar能直接标红这就是类型推断在模板上的应用。VUE2时代这几乎做不到必须运行时才能发现。如果你还在用Vetur模板里的类型错误不会显示还会和Volar冲突出现找不到模块之类的假报错。所以插件选型的第一步确认你用的是Volar而不是Vetur。2.2 不要让插件替代工程化工具很多新人有个误区以为VsCode装上插件就能替代项目里的构建和规范工具。ESLint和Prettier不通过依赖安装进项目而只是装一个VsCode插件的话编辑器没法读取项目的配置规则。正确的思路是项目里先用npm装好eslint、prettier、typescript以及对应的VUE3解析插件然后在VsCode里装ESLint和Prettier扩展让扩展去调用项目里的本地依赖。这样做的好处非常多——插件版本跟随项目走不会出现A项目用eslint 7、B项目用eslint 9导致规则不一致的情况同时CI/CD流程里跑的lint脚本和编辑器里看到的报错完全一致团队协作时不会出现我这明明没报错怎么流水线挂了的争吵。这也是整篇推荐插件时必须要强调的一个原则vsCode插件只是工程化的前端入口不是工程化本身。3. 核心插件清单十个高价值插件逐个拆解3.1 Vue Language Features (Volar)这是写VUE3必须安装的第一插件。它的功能包括vue文件内script和template的类型检查、智能补全、自动导入组件、ref与reactive等响应式API的类型推断以及支持VUE2和VUE3项目。在VSCode扩展市场搜索Vue Language Features认准Vue官方发布的那个作者是Vue Team。安装有两点特别提醒一是如果之前装过Vetur请先在扩展列表里禁用或卸载Vetur两者会冲突最常见的表现是vue文件的语法高亮错乱、template里的警告乱飘。二是Volar需要启用Takeover Mode做法是CtrlShiftP或macOS的CmdShiftP打开命令面板运行Vue: Takeover Mode并接受。启用后VsCode会把原本给TS文件用的语言服务也交给Volar统一处理避免Volar和TypeScript两个语言服务同时跑导致内存翻倍。Volar的另一个好用功能是Reactivity Transform支持不过这个功能依赖VUE3.3以上版本不是默认开启需要自己在tsconfig中配置vueCompilerOptions: { reactivityTransform: true }。我个人建议团队里先保持默认等需求确实需要的时候再单独开启因为这会改变代码写法老代码的ref()取值习惯会被颠覆团队成本不小。3.2 TypeScript Vue Plugin (Volar)这个插件以前是Volar的一部分后来拆成了独立扩展。它的作用是让TsServer识别vue文件中的TS类型信息简单说就是如果你在script setup langts里写了一段逻辑到其他TS文件里引用这个vue组件时VsCode能够正确提示组件的props类型、emit事件类型而不是显示一个简单的any。在Vite VUE3项目里这个插件需要和Volar配合使用单独的Volar处理模板部分这个插件处理.ts文件与vue的桥接。安装后不需要额外配置但需要注意当你明显感到某个项目的类型检查特别慢比如保存一个文件要卡一两秒可以在扩展设置里关掉Enable Projec Wide IntelliSense只在打开当前文件时提供类型服务速度会快很多代价是跨文件类型推断变弱。这个取舍适合大项目小项目不建议关闭。3.3 ESLintESLint插件本身不是VUE3专用但VUE3项目的代码规范几乎都靠它。VUE3官方脚手架create-vue创建的工程默认已经配置了ESLint通常包含vue/eslint-config-typescript和vue/eslint-config-prettier两条链路。VsCode里的ESLint扩展会读取项目根目录的eslint.config.js新版Flat Config或.eslintrc.js然后实时在写代码时标出错误和警告。配置方面有一个常见问题必须说明很多人在全局装过ESLintVsCode扩展默认会去找全局版本这会导致高层目录没有配置规则时报ESLint couldnt find config或者用了项目里根本不存在的旧规则。解决方法是在项目根目录的.vscode/settings.json里写{ eslint.useFlatConfig: true, eslint.validate: [vue, javascript, typescript, html] }如果你的eslint配置是eslint.config.jsFlat Config格式必须开启eslint.useFlatConfig如果是.eslintrc.js则不要开。VUE3的新项目基本都用Flat Config了建议跟随新格式。3.4 PrettierPrettier负责代码格式化和ESLint的分工是ESLint管代码质量和潜在错误Prettier管格式统一。VUE3项目里格式化vue文件时如果没装Prettier插件VsCode的格式化文档可能不会正常工作手动整理缩进会把人逼疯。装上Prettier扩展后在settings.json里配置{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode } }这里有一个极易吵架的细节如果你希望保存时同时修正ESLint报错就单独给ESLint配置source.fixAll{ editor.codeActionsOnSave: { source.fixAll.eslint: explicit } }注意不要用source.fixAll: true因为那会把Prettier应该干的活也一起干了格式化和lint规则混在一起经常出现保存后代码乱跳的问题。这个问题到目前为止我不知道帮人排查过多少次八成都是因为开着source.fixAll全量修复加上Prettier和ESLint规则冲突导致的。3.5 Auto Rename Tag这个插件解决的是HTML标签重命名问题。写VUE3模板时改一个开标签的类名和闭标签不匹配是家常便饭比如div改成了section但闭标签/div忘了改浏览器里渲染会乱掉。Auto Rename Tag会在你改名开标签的同时自动改对应的闭标签正面id和class不用管就是干这个事的。有人觉得这不是Vue的活吗其实编辑器本身不提供这个行为Volar也不管所以这个插件属于必须装的补充品。它对嵌套组件标签同样有效比如ChildComponent/ChildComponent改名称时两边同步非常实用。这个插件没有配置项装上就行。3.6 Path IntellisenseVUE3项目里import路径特别多尤其是../../components/xxx.vue这种相对路径和/components/xxx.vue这种别名路径。Path Intellisense可以提供路径补全输入/之后直接列出src下的目录和文件不用自己手打文件名而且能自动识别一二级目录。如果要让别名生效需要在settings.json里加上{ path-intellisense.mappings: { : ${workspaceRoot}/src } }注意这里只是给编辑器提供路径补全真正让Vite和Ts识别别名需要分别配vite.config.ts里的resolve.alias和tsconfig.json里的paths。不配这个映射的话/开头通常也能靠tsconfig自动识别但偶尔遇到复杂嵌套路径时会漏建议写上。这个插件同时还解决了另一个痛点如果你引用的路径打错了比如./components/Button.vue写成了./components/Buton.vue它会高亮标红不用等到Vite启动后才报错。3.7 GitLensGitLens本身不是一个VUE3专用插件但团队的VUE3项目几乎都离不开它。它的核心价值是看git blame一行代码是谁写的、哪次提交、commit message是什么。在一堆人维护同一个组件的场景下这个信息太重要了。比如看到watch(() props.visible, ...)这行代码想改之前先看一眼是谁在什么需求下加的避免搞坏别人的逻辑。GitLens默认开的机会比较多如果你嫌它信息块太多干扰视线可以在settings.json里关掉一些默认的editor decorations{ gitlens.currentLine.enabled: false, gitlens.hovers.enabled: false, gitlens.codeLens.enabled: false }这样右键git历史、查看blame的功能仍然保留只是不在代码行旁边显示一堆文本框界面干净得多。新人团队我建议打开currentLine毕竟习惯git blame要一段时间培养。3.8 VueDevTools的浏览器扩展严格来说这不是VsCode插件但我之所以把它放在清单里是因为很多VsCode的插件依赖它来调试。Vue DevTools是浏览器里的开发者工具扩展主要功能包括查看组件树、检查props和state、查看Pinia store、追踪事件触发。前面几个VsCode插件负责开发和编译环节真正调页面显示问题时靠的是它。唯一的调用方式是安装Chrome或Edge扩展然后Vite启动的本地开发服务器页面自动识别。在调试自定义事件和provide/inject时非常顺手比如emit(update:visible, false)后组件的props变化在DevTools里一眼可见。4. 关键配置与实操细节4.1 一份可复制的.vscode/settings.json上面已经提到了一些配置但最好把它们整合成一份完整配置。这里提供一份我平时创建VUE3项目时统一放到.vscode/settings.json的模板。{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, editor.tabSize: 2, editor.rulers: [80, 100], [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, eslint.validate: [vue, javascript, typescript, html], eslint.useFlatConfig: true, path-intellisense.mappings: { : ${workspaceRoot}/src }, files.eol: \n, search.useIgnoreFiles: true }有几个点说一下editor.tabSize设成2符合Vue官方风格但也取决于你的prettier配置文件里tabWidth值两者不一致会出现格式化后tab大小变来变去的情况。files.eol强制换行符为LF避免Windows和Mac协作时看到整个文件显示成diff。search.useIgnoreFiles让搜索跳过node_modules不过如果你已经把node_modules加到files.exclude里这个其实不是必须的。4.2 Volar的Takeover Mode开启和验证建议拿到新电脑后开一个VUE3项目验证一下模板类型检查。操作顺序是先装Volar和TypeScript Vue Plugin禁用或卸载Vetur然后运行命令Vue: Takeover Mode重启VsCode。验证方法很直接在template里写{{ undefinedVar }}如果undefinedVar被标红说明类型服务已经工作了。更进阶的验证写一个defineProps{ name: string }()然后在template里写{{ name.toFixed() }}number上的操作不会被报错字符串上的toFixed会被标红这样你就知道模板类型推导真的生效了。有人抱怨Volar在vue文件里跳转定义有时会跳到.d.ts而不是源文件这其实是Volar和TS Server的不同行为可以在设置里把vue.server.includeLanguages中的typescript关掉试试但多数情况下顺着.d.ts跳两次也能到源文件忍一忍不纠结。4.3 ESLint Prettier的冲突处理ESLint和Prettier的冲突主要体现在eslint规则里要求要么有分号要么没分号prettier也有一套自己的分号规则。如果两端配置不一致保存时先被Prettier格式化紧接着ESLint又报错要求改回来形成保存之后还是红的体验。解决思路是eslint配置里关掉与prettier冲突的规则推荐直接在eslint.config.js里加上prettier规则集import eslintConfigPrettier from vue/eslint-config-prettier export default [ // ...其他规则 eslintConfigPrettier ]如果你用的是老式的.eslintrc.js则要找到extends数组里的plugin:prettier/recommended。这是比较标准的做法。另一个细节ESLint插件首次启动会弹权限需要允许它读取项目文件否则它显示ok但实际上什么也不检查这个权限提示有时候会被VS Code自动拦截掉需要手动到扩展管理里授权。4.4 调试VUE3应用的launch.json配置光有Debugger for Chrome插件还不够需要在项目根目录.vscode/launch.json里配置调试入口。VUE3 Vite项目常用的是让VsCode启动一个Chrome实例并连上vite开发服务器{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: Debug in Chrome, url: http://localhost:5173, webRoot: ${workspaceFolder}/src, sourceMaps: true, trace: false } ] }Vite默认端口是5173如果改了端口需要同步改url。sourceMaps必须开着不然断点会命不中源码文件。如果只想调试当前打开的vue组件可以在vue文件里打debugger或断点然后在VsCode里F5启动能在源码中断下来就是配置成功的表现。如果遇到断点没有命中大多数原因是vite的sourcemap配置没有打开检查vite.config.ts里的build.sourcemap字段它影响的是生产构建开发服务器默认sourcemap一般没问题更常见的是URL端口不一致。4.5 别名跳转与JSX支持配置VUE3项目里用/路径非常普遍但光装Path Intellisense还不够要让Ctrl点击跳转到源文件需要tsconfig.json和vite.config.ts都配好别名。tsconfig.json里添加{ compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }vite.config.ts里添加import { fileURLToPath, URL } from node:url export default defineConfig({ resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)) } } })如果你在vue文件里要用JSXVUE3也是支持JSX语法的在tsconfig.json的compilerOptions里加上jsx: preserve同时在vite.config.ts里加上vitejs/plugin-vue-jsx插件。加上这些之后VsCode的JSX智能提示和类型推断才会正常否则识别不了jsx后缀文件。5. 常见问题与排查技巧实录5.1 装了一大堆插件vue文件还是没有任何提示这是问得最多的一类问题排查顺序基本是固定的。第一步确认Volar可用来到一个vue文件看右下角语言的名称应该是Vue而不是Plain Text如果不是Vue语言模式点一下右下角重新选择Vue。第二步确认扩展有没有被项目禁用.vscode/settings.json里可能存在extensions.ignoreRecommendations但没有针对vue的禁用项一般不会出现但Volar和Vetur冲突时Vetur会抢占语言模式最直观的表现是右下角语言显示Vue (Vetur)这时需要禁用Vetur。第三步检查Volar的Takeover Mode是否开启没开的话通过命令面板开启。还有一个小概率问题项目根目录没有tsconfig.json。Volar需要tsconfig来做类型服务如果你只用一个极简的index.html vue文件或者你新建一个空目录就叫vue3但还没初始化npm那Volar没有任何可以加载的工程上下文补全自然为空。先跑一遍npm create vuelatest初始化工程再看。5.2 保存时代码乱跳、双引号变单引号、缩进忽大忽小这个问题九成九是Prettier和项目里的editorconfig冲突或者多个格式化工具同时接管vue文件。比如你装了Prettier同时又装了Vue VSCode Snippets或者别的组件库插件自带的格式化器它们在格式化文档时会产生竞争。处理方式是在settings.json里对[vue]显式声明defaultFormatter为prettier把其他竞争格式化器全部排除。如果你项目里同时有.editorconfig文件它和Prettier的配置可能不一致。比如.editorconfig里设置indent_size4而.prettierrc里是2保存时编辑器按prettier走但git显示大量缩进变化。遇到这种情况以Prettier配置为准把.editorconfig删掉或者统一成相同的值新手团队建议直接统一用.prettierrc一个配置源。5.3 局域网访问Vite项目显示空白开发VUE3项目时手机或局域网另一台机器访问这个开发服务器可能打开页面是空白的。这不是插件问题但属于开发环境中常见的VsCode Vite配套问题。Vite默认只监听localhost需要把vite.config.ts里的server.host改成0.0.0.0或者true并且VsCode终端里启动vite时同样会读取这个配置所以改动vite.config.ts重启一下dev server即可。注意改了host之后页面上访问的API代理地址也可能会变一般用相对路径代理就不会有这个问题。5.4 CefSharp嵌入VUE3时window.cefBridge未定义有读者在做CefSharp VUE3桌面端项目时会在VsCode里开发调试window.cefBridge对象在浏览器里是undefined原因是CefSharp注入的JS对象只在真实客户端环境里存在vsCode的调试页面Chrome DevTools里没有。解决方案是在main.ts或初始化逻辑里做一个环境判断比如const cefBridge (window as any).cefBridge if (cefBridge) { cefBridge.emit(app-ready) } else { console.warn(cefBridge not found in current environment) }然后在开发模式下自己mock一份cefBridge保证开发时才不会一进来就炸。这虽然不是插件列表范畴但正因为你是用VsCode开发VUE3桌面端很容易被这个报错卡住半天所以出现得很频繁就顺手拿来分享了。5.5 vue3动态增删表单行时代码提示不更新有时候你在VUE3项目里用v-for渲染一组表单行某个字段明明已经在reactive里定义好但模板里还是飘红。这种情况很多是因为表单数据结构是动态的比如const form reactive({ list: [] })Volar无法从空数组推断list内部对象的字段类型。建议给ref或reactive的泛型加上interface定义比如interface RowData { name: string age: number } const list refRowData[]([])这样模板里item.name、item.age都会有正确的提示和校验。这是VUE3 TypeScript最常见的一个插件表现不好的场景实际上插件没问题是类型没写清楚。6. 实操总结与个人建议整篇下来你会发现真正绕不开的核心其实就四个Volar、ESLint、Prettier、Path Intellisense其他全是效率补充。我自己配一套新环境的时间大概在十分钟左右第一次配好并验证通过之后后面每次换电脑基本0成本复制配置。有几个小心得可以分享。第一不要照搬别人的settings.json你项目的eslint规则和prettier规则可能和别人完全不同插件是通用的配置必须和项目对齐。第二插件装完一定跑一遍真实项目验证模板类型检查有没有生效不然装了等于没装。第三编辑器是工具你的项目工程化是否规范才是决定代码质量的关键VsCode插件只是替你把这个规范实时反馈在屏幕上。如果你现在正在从VUE2迁移到VUE3最先做的不是换插件而是把整个项目的构建、类型、lint链路依赖升级到VUE3兼容版本。插件更新很快但依赖版本决定一切。希望这套清单能帮你少踩几个坑把VsCode真正变成高效开发VUE3的事实标准工具。
VUE3项目VsCode插件怎么选？十款核心插件与配置避坑指南
1. 项目概述VUE3开发中VsCode为什么需要插件自己平时的工作流里VsCode是电脑上打开频率最高的软件而最近两年帮团队搭VUE3项目、带新人、审代码的过程中我发现一个很有意思的现象很多人装了一堆插件结果该有的提示没有该报的错不报还有的人一个插件没装天天切回终端手动跑命令。如果你在用VsCode开发VUE3项目但还没有一套稳定的插件组合那这篇文章就是给你准备的。以前写VUE2的时候Vetur一个插件基本能走天下语法高亮、补全、格式化都有。但VUE3出来之后整个编译链路换成了Vue Compiler TypeScriptVetur已经跟不上趟了必须用Volar这套新体系。更麻烦的是VUE3的项目往往同时涉及TypeScript、ESLint、Prettier、Vite、Vue Router、Pinia还有各种各样的路径别名光靠编辑器原生功能完全不够用。插件列表看上去很长但真正需要安装和配置的核心插件其实固定在十个以内。在展开插件清单之前先说一个容易踩的坑插件装得多不等于开发效率高。插件一旦超过二十个VsCode的启动速度和CPU占用都会明显上升而且很容易出现语法检查冲突、代码格式化打架、跳转指向错误文件。所以这篇内容不只是列插件重点是把每个插件解决什么问题、和什么场景匹配、配置里面有哪些坑讲清楚帮你搭出一套克制、好用、可持续维护的VsCode插件环境。阅读对象包括正在入门VUE3的前端新人、准备把旧项目升级到VUE3的团队以及想优化自己日常开发工具链的熟练开发者。2. 插件选型思路为什么这套组合适合VUE32.1 VUE3独有的技术变化决定了插件方向VUE3相比VUE2的最大区别是全面拥抱TypeScript以及组件的编译时优化。VUE2时代的模板编译结果就是render函数类型检查和代码提示都停留在字符串级别VUE3则不同单文件组件里的模板部分会被单独编译成虚拟DOM描述并且可以做类型推断。这意味着编辑器需要能读取.env.d.ts、tsconfig.json、vue文件的script块然后把这些信息统一注入到模板表达式里。Volar就是这个体系下的产物它本质上是一个语言服务不是一个简单的语法高亮插件。比如你在VUE3的template里写了{{ userInfo.name }}如果userInfo没有定义name属性Volar能直接标红这就是类型推断在模板上的应用。VUE2时代这几乎做不到必须运行时才能发现。如果你还在用Vetur模板里的类型错误不会显示还会和Volar冲突出现找不到模块之类的假报错。所以插件选型的第一步确认你用的是Volar而不是Vetur。2.2 不要让插件替代工程化工具很多新人有个误区以为VsCode装上插件就能替代项目里的构建和规范工具。ESLint和Prettier不通过依赖安装进项目而只是装一个VsCode插件的话编辑器没法读取项目的配置规则。正确的思路是项目里先用npm装好eslint、prettier、typescript以及对应的VUE3解析插件然后在VsCode里装ESLint和Prettier扩展让扩展去调用项目里的本地依赖。这样做的好处非常多——插件版本跟随项目走不会出现A项目用eslint 7、B项目用eslint 9导致规则不一致的情况同时CI/CD流程里跑的lint脚本和编辑器里看到的报错完全一致团队协作时不会出现我这明明没报错怎么流水线挂了的争吵。这也是整篇推荐插件时必须要强调的一个原则vsCode插件只是工程化的前端入口不是工程化本身。3. 核心插件清单十个高价值插件逐个拆解3.1 Vue Language Features (Volar)这是写VUE3必须安装的第一插件。它的功能包括vue文件内script和template的类型检查、智能补全、自动导入组件、ref与reactive等响应式API的类型推断以及支持VUE2和VUE3项目。在VSCode扩展市场搜索Vue Language Features认准Vue官方发布的那个作者是Vue Team。安装有两点特别提醒一是如果之前装过Vetur请先在扩展列表里禁用或卸载Vetur两者会冲突最常见的表现是vue文件的语法高亮错乱、template里的警告乱飘。二是Volar需要启用Takeover Mode做法是CtrlShiftP或macOS的CmdShiftP打开命令面板运行Vue: Takeover Mode并接受。启用后VsCode会把原本给TS文件用的语言服务也交给Volar统一处理避免Volar和TypeScript两个语言服务同时跑导致内存翻倍。Volar的另一个好用功能是Reactivity Transform支持不过这个功能依赖VUE3.3以上版本不是默认开启需要自己在tsconfig中配置vueCompilerOptions: { reactivityTransform: true }。我个人建议团队里先保持默认等需求确实需要的时候再单独开启因为这会改变代码写法老代码的ref()取值习惯会被颠覆团队成本不小。3.2 TypeScript Vue Plugin (Volar)这个插件以前是Volar的一部分后来拆成了独立扩展。它的作用是让TsServer识别vue文件中的TS类型信息简单说就是如果你在script setup langts里写了一段逻辑到其他TS文件里引用这个vue组件时VsCode能够正确提示组件的props类型、emit事件类型而不是显示一个简单的any。在Vite VUE3项目里这个插件需要和Volar配合使用单独的Volar处理模板部分这个插件处理.ts文件与vue的桥接。安装后不需要额外配置但需要注意当你明显感到某个项目的类型检查特别慢比如保存一个文件要卡一两秒可以在扩展设置里关掉Enable Projec Wide IntelliSense只在打开当前文件时提供类型服务速度会快很多代价是跨文件类型推断变弱。这个取舍适合大项目小项目不建议关闭。3.3 ESLintESLint插件本身不是VUE3专用但VUE3项目的代码规范几乎都靠它。VUE3官方脚手架create-vue创建的工程默认已经配置了ESLint通常包含vue/eslint-config-typescript和vue/eslint-config-prettier两条链路。VsCode里的ESLint扩展会读取项目根目录的eslint.config.js新版Flat Config或.eslintrc.js然后实时在写代码时标出错误和警告。配置方面有一个常见问题必须说明很多人在全局装过ESLintVsCode扩展默认会去找全局版本这会导致高层目录没有配置规则时报ESLint couldnt find config或者用了项目里根本不存在的旧规则。解决方法是在项目根目录的.vscode/settings.json里写{ eslint.useFlatConfig: true, eslint.validate: [vue, javascript, typescript, html] }如果你的eslint配置是eslint.config.jsFlat Config格式必须开启eslint.useFlatConfig如果是.eslintrc.js则不要开。VUE3的新项目基本都用Flat Config了建议跟随新格式。3.4 PrettierPrettier负责代码格式化和ESLint的分工是ESLint管代码质量和潜在错误Prettier管格式统一。VUE3项目里格式化vue文件时如果没装Prettier插件VsCode的格式化文档可能不会正常工作手动整理缩进会把人逼疯。装上Prettier扩展后在settings.json里配置{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode } }这里有一个极易吵架的细节如果你希望保存时同时修正ESLint报错就单独给ESLint配置source.fixAll{ editor.codeActionsOnSave: { source.fixAll.eslint: explicit } }注意不要用source.fixAll: true因为那会把Prettier应该干的活也一起干了格式化和lint规则混在一起经常出现保存后代码乱跳的问题。这个问题到目前为止我不知道帮人排查过多少次八成都是因为开着source.fixAll全量修复加上Prettier和ESLint规则冲突导致的。3.5 Auto Rename Tag这个插件解决的是HTML标签重命名问题。写VUE3模板时改一个开标签的类名和闭标签不匹配是家常便饭比如div改成了section但闭标签/div忘了改浏览器里渲染会乱掉。Auto Rename Tag会在你改名开标签的同时自动改对应的闭标签正面id和class不用管就是干这个事的。有人觉得这不是Vue的活吗其实编辑器本身不提供这个行为Volar也不管所以这个插件属于必须装的补充品。它对嵌套组件标签同样有效比如ChildComponent/ChildComponent改名称时两边同步非常实用。这个插件没有配置项装上就行。3.6 Path IntellisenseVUE3项目里import路径特别多尤其是../../components/xxx.vue这种相对路径和/components/xxx.vue这种别名路径。Path Intellisense可以提供路径补全输入/之后直接列出src下的目录和文件不用自己手打文件名而且能自动识别一二级目录。如果要让别名生效需要在settings.json里加上{ path-intellisense.mappings: { : ${workspaceRoot}/src } }注意这里只是给编辑器提供路径补全真正让Vite和Ts识别别名需要分别配vite.config.ts里的resolve.alias和tsconfig.json里的paths。不配这个映射的话/开头通常也能靠tsconfig自动识别但偶尔遇到复杂嵌套路径时会漏建议写上。这个插件同时还解决了另一个痛点如果你引用的路径打错了比如./components/Button.vue写成了./components/Buton.vue它会高亮标红不用等到Vite启动后才报错。3.7 GitLensGitLens本身不是一个VUE3专用插件但团队的VUE3项目几乎都离不开它。它的核心价值是看git blame一行代码是谁写的、哪次提交、commit message是什么。在一堆人维护同一个组件的场景下这个信息太重要了。比如看到watch(() props.visible, ...)这行代码想改之前先看一眼是谁在什么需求下加的避免搞坏别人的逻辑。GitLens默认开的机会比较多如果你嫌它信息块太多干扰视线可以在settings.json里关掉一些默认的editor decorations{ gitlens.currentLine.enabled: false, gitlens.hovers.enabled: false, gitlens.codeLens.enabled: false }这样右键git历史、查看blame的功能仍然保留只是不在代码行旁边显示一堆文本框界面干净得多。新人团队我建议打开currentLine毕竟习惯git blame要一段时间培养。3.8 VueDevTools的浏览器扩展严格来说这不是VsCode插件但我之所以把它放在清单里是因为很多VsCode的插件依赖它来调试。Vue DevTools是浏览器里的开发者工具扩展主要功能包括查看组件树、检查props和state、查看Pinia store、追踪事件触发。前面几个VsCode插件负责开发和编译环节真正调页面显示问题时靠的是它。唯一的调用方式是安装Chrome或Edge扩展然后Vite启动的本地开发服务器页面自动识别。在调试自定义事件和provide/inject时非常顺手比如emit(update:visible, false)后组件的props变化在DevTools里一眼可见。4. 关键配置与实操细节4.1 一份可复制的.vscode/settings.json上面已经提到了一些配置但最好把它们整合成一份完整配置。这里提供一份我平时创建VUE3项目时统一放到.vscode/settings.json的模板。{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, editor.tabSize: 2, editor.rulers: [80, 100], [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, eslint.validate: [vue, javascript, typescript, html], eslint.useFlatConfig: true, path-intellisense.mappings: { : ${workspaceRoot}/src }, files.eol: \n, search.useIgnoreFiles: true }有几个点说一下editor.tabSize设成2符合Vue官方风格但也取决于你的prettier配置文件里tabWidth值两者不一致会出现格式化后tab大小变来变去的情况。files.eol强制换行符为LF避免Windows和Mac协作时看到整个文件显示成diff。search.useIgnoreFiles让搜索跳过node_modules不过如果你已经把node_modules加到files.exclude里这个其实不是必须的。4.2 Volar的Takeover Mode开启和验证建议拿到新电脑后开一个VUE3项目验证一下模板类型检查。操作顺序是先装Volar和TypeScript Vue Plugin禁用或卸载Vetur然后运行命令Vue: Takeover Mode重启VsCode。验证方法很直接在template里写{{ undefinedVar }}如果undefinedVar被标红说明类型服务已经工作了。更进阶的验证写一个defineProps{ name: string }()然后在template里写{{ name.toFixed() }}number上的操作不会被报错字符串上的toFixed会被标红这样你就知道模板类型推导真的生效了。有人抱怨Volar在vue文件里跳转定义有时会跳到.d.ts而不是源文件这其实是Volar和TS Server的不同行为可以在设置里把vue.server.includeLanguages中的typescript关掉试试但多数情况下顺着.d.ts跳两次也能到源文件忍一忍不纠结。4.3 ESLint Prettier的冲突处理ESLint和Prettier的冲突主要体现在eslint规则里要求要么有分号要么没分号prettier也有一套自己的分号规则。如果两端配置不一致保存时先被Prettier格式化紧接着ESLint又报错要求改回来形成保存之后还是红的体验。解决思路是eslint配置里关掉与prettier冲突的规则推荐直接在eslint.config.js里加上prettier规则集import eslintConfigPrettier from vue/eslint-config-prettier export default [ // ...其他规则 eslintConfigPrettier ]如果你用的是老式的.eslintrc.js则要找到extends数组里的plugin:prettier/recommended。这是比较标准的做法。另一个细节ESLint插件首次启动会弹权限需要允许它读取项目文件否则它显示ok但实际上什么也不检查这个权限提示有时候会被VS Code自动拦截掉需要手动到扩展管理里授权。4.4 调试VUE3应用的launch.json配置光有Debugger for Chrome插件还不够需要在项目根目录.vscode/launch.json里配置调试入口。VUE3 Vite项目常用的是让VsCode启动一个Chrome实例并连上vite开发服务器{ version: 0.2.0, configurations: [ { type: chrome, request: launch, name: Debug in Chrome, url: http://localhost:5173, webRoot: ${workspaceFolder}/src, sourceMaps: true, trace: false } ] }Vite默认端口是5173如果改了端口需要同步改url。sourceMaps必须开着不然断点会命不中源码文件。如果只想调试当前打开的vue组件可以在vue文件里打debugger或断点然后在VsCode里F5启动能在源码中断下来就是配置成功的表现。如果遇到断点没有命中大多数原因是vite的sourcemap配置没有打开检查vite.config.ts里的build.sourcemap字段它影响的是生产构建开发服务器默认sourcemap一般没问题更常见的是URL端口不一致。4.5 别名跳转与JSX支持配置VUE3项目里用/路径非常普遍但光装Path Intellisense还不够要让Ctrl点击跳转到源文件需要tsconfig.json和vite.config.ts都配好别名。tsconfig.json里添加{ compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }vite.config.ts里添加import { fileURLToPath, URL } from node:url export default defineConfig({ resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)) } } })如果你在vue文件里要用JSXVUE3也是支持JSX语法的在tsconfig.json的compilerOptions里加上jsx: preserve同时在vite.config.ts里加上vitejs/plugin-vue-jsx插件。加上这些之后VsCode的JSX智能提示和类型推断才会正常否则识别不了jsx后缀文件。5. 常见问题与排查技巧实录5.1 装了一大堆插件vue文件还是没有任何提示这是问得最多的一类问题排查顺序基本是固定的。第一步确认Volar可用来到一个vue文件看右下角语言的名称应该是Vue而不是Plain Text如果不是Vue语言模式点一下右下角重新选择Vue。第二步确认扩展有没有被项目禁用.vscode/settings.json里可能存在extensions.ignoreRecommendations但没有针对vue的禁用项一般不会出现但Volar和Vetur冲突时Vetur会抢占语言模式最直观的表现是右下角语言显示Vue (Vetur)这时需要禁用Vetur。第三步检查Volar的Takeover Mode是否开启没开的话通过命令面板开启。还有一个小概率问题项目根目录没有tsconfig.json。Volar需要tsconfig来做类型服务如果你只用一个极简的index.html vue文件或者你新建一个空目录就叫vue3但还没初始化npm那Volar没有任何可以加载的工程上下文补全自然为空。先跑一遍npm create vuelatest初始化工程再看。5.2 保存时代码乱跳、双引号变单引号、缩进忽大忽小这个问题九成九是Prettier和项目里的editorconfig冲突或者多个格式化工具同时接管vue文件。比如你装了Prettier同时又装了Vue VSCode Snippets或者别的组件库插件自带的格式化器它们在格式化文档时会产生竞争。处理方式是在settings.json里对[vue]显式声明defaultFormatter为prettier把其他竞争格式化器全部排除。如果你项目里同时有.editorconfig文件它和Prettier的配置可能不一致。比如.editorconfig里设置indent_size4而.prettierrc里是2保存时编辑器按prettier走但git显示大量缩进变化。遇到这种情况以Prettier配置为准把.editorconfig删掉或者统一成相同的值新手团队建议直接统一用.prettierrc一个配置源。5.3 局域网访问Vite项目显示空白开发VUE3项目时手机或局域网另一台机器访问这个开发服务器可能打开页面是空白的。这不是插件问题但属于开发环境中常见的VsCode Vite配套问题。Vite默认只监听localhost需要把vite.config.ts里的server.host改成0.0.0.0或者true并且VsCode终端里启动vite时同样会读取这个配置所以改动vite.config.ts重启一下dev server即可。注意改了host之后页面上访问的API代理地址也可能会变一般用相对路径代理就不会有这个问题。5.4 CefSharp嵌入VUE3时window.cefBridge未定义有读者在做CefSharp VUE3桌面端项目时会在VsCode里开发调试window.cefBridge对象在浏览器里是undefined原因是CefSharp注入的JS对象只在真实客户端环境里存在vsCode的调试页面Chrome DevTools里没有。解决方案是在main.ts或初始化逻辑里做一个环境判断比如const cefBridge (window as any).cefBridge if (cefBridge) { cefBridge.emit(app-ready) } else { console.warn(cefBridge not found in current environment) }然后在开发模式下自己mock一份cefBridge保证开发时才不会一进来就炸。这虽然不是插件列表范畴但正因为你是用VsCode开发VUE3桌面端很容易被这个报错卡住半天所以出现得很频繁就顺手拿来分享了。5.5 vue3动态增删表单行时代码提示不更新有时候你在VUE3项目里用v-for渲染一组表单行某个字段明明已经在reactive里定义好但模板里还是飘红。这种情况很多是因为表单数据结构是动态的比如const form reactive({ list: [] })Volar无法从空数组推断list内部对象的字段类型。建议给ref或reactive的泛型加上interface定义比如interface RowData { name: string age: number } const list refRowData[]([])这样模板里item.name、item.age都会有正确的提示和校验。这是VUE3 TypeScript最常见的一个插件表现不好的场景实际上插件没问题是类型没写清楚。6. 实操总结与个人建议整篇下来你会发现真正绕不开的核心其实就四个Volar、ESLint、Prettier、Path Intellisense其他全是效率补充。我自己配一套新环境的时间大概在十分钟左右第一次配好并验证通过之后后面每次换电脑基本0成本复制配置。有几个小心得可以分享。第一不要照搬别人的settings.json你项目的eslint规则和prettier规则可能和别人完全不同插件是通用的配置必须和项目对齐。第二插件装完一定跑一遍真实项目验证模板类型检查有没有生效不然装了等于没装。第三编辑器是工具你的项目工程化是否规范才是决定代码质量的关键VsCode插件只是替你把这个规范实时反馈在屏幕上。如果你现在正在从VUE2迁移到VUE3最先做的不是换插件而是把整个项目的构建、类型、lint链路依赖升级到VUE3兼容版本。插件更新很快但依赖版本决定一切。希望这套清单能帮你少踩几个坑把VsCode真正变成高效开发VUE3的事实标准工具。
