必须安装volar、typescript vue plugin(volar)和eslint扩展，卸载vetur；tsconfig.json需添加"types": ["vue"]；多框架项目应关闭volar的take over mode。
VSCode 本身不内置 Vue 支持，但通过合理组合扩展和配置，能获得接近 IDE 级别的开发体验——关键不在装多少插件，而在哪些必须启用、哪些必须禁用、哪些配置项不设就必踩坑。
必须安装的三个扩展（缺一不可）
Vue 开发中，Volar 是当前唯一推荐的官方支持扩展（取代已废弃的 Vetur），它提供语法高亮、模板类型检查、ref/reactive 自动推导等核心能力；TypeScript Vue Plugin (Volar) 是其配套服务，负责在 .vue 文件中桥接 TS 类型系统；ESLint 扩展则用于实时校验代码规范（需项目已配好 eslint-plugin-vue）。
常见错误：装了 Vetur 还没卸载，导致与 Volar 冲突，表现为模板中 ref 类型不提示、defineProps 报红、Ctrl+Click 跳转失效。
- 卸载所有旧版 Vue 相关扩展（尤其是
Vetur） - 重启 VSCode 后再启用
Volar，否则语言服务不会激活 - 确认状态栏右下角显示
Vue (Volar)，而非Vue (Vetur)或纯HTML
tsconfig.json 必须开启 "compilerOptions.types"
Vue 3 + TS 项目中，若 tsconfig.json 里没显式声明 "types": ["vue"]，Volar 就无法识别 defineProps、defineEmits 等宏，会报 Cannot find name 'defineProps' 错误，即使代码完全合法。
这不是 VSCode 配置问题，而是 TypeScript 编译上下文缺失 Vue 类型定义。Volar 依赖 TS 服务注入类型，而该注入的前提是 TS 能加载 @vue/runtime-core 提供的全局声明。
- 在项目根目录
tsconfig.json的compilerOptions中添加："types": ["vue"]
- 如果使用
jsconfig.json（JS 项目），需改用"types": ["vue/types"]并确保已安装@vue/runtime-core - 修改后必须重启 TS 服务器：快捷键
Ctrl+Shift+P→ 输入Restart TS server
关闭 Volar 的 "Take Over Mode"（仅限多框架共存项目）
默认开启的 Take Over Mode 会让 Volar 强制接管所有 .ts 和 .js 文件的语言服务——这在纯 Vue 项目中没问题，但在同时含 React、Node.js 或 Electron 模块的项目里，会导致非 Vue 文件失去原生 TS/JS 支持，比如 useState 不提示、require 报错、__dirname 未定义。
这个开关藏得深：打开命令面板 Ctrl+Shift+P → 输入 Volar: Disable Take Over Mode 即可关闭。关闭后，Volar 只作用于 .vue 文件，其他文件交还给 TS 官方语言服务。
- 是否需要关闭，取决于你项目里有没有非 Vue 的 TS/JS 文件需要智能提示
- 关闭后，
.vue文件内 script 部分仍完整支持类型推导，不受影响 - 如果误关又想恢复，命令是
Volar: Enable Take Over Mode
真正卡住人的往往不是“怎么配”，而是“配完为什么没反应”——比如类型不提示，大概率是 tsconfig.json 少了 types；比如跳转失效，八成是 Vetur 残留或没重启 TS 服务；比如 JS 文件报一堆错，基本就是 Take Over Mode 开太猛了。这些点不手动验证，光看教程装插件，环境永远是半残的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
