VSCode需安装Volar、TypeScript Vue Plugin(Volar)和Prettier三个插件并正确配置：启用Volar的Take Over Mode，设置script标签lang="ts"，配置launch.json使用chrome调试器并确保source map开启。
VSCode 本身不“支持 Vue.js”，而是靠插件 + 配置补全开发体验。开箱即用的语法高亮、跳转、自动补全，必须手动装对插件并启用对应语言服务。
必须安装的三个核心插件
缺一不可，且版本需匹配 Vue 版本（尤其是 Vue 3 项目）：
-
Volar：Vue 官方推荐的语言服务器（取代已废弃的Vetur），提供<script setup></script>支持、响应式类型推导、模板内 TypeScript 检查 -
TypeScript Vue Plugin (Volar)：配合 Volar 使用的 TS 插件，确保.vue文件中script区域能正确识别组合式 API 类型 -
Prettier：格式化代码，但需注意与 Volar 冲突——必须在 VSCode 设置中禁用Prettier对.vue文件的默认接管，改由 Volar 自带的格式化器处理
项目初始化后要立即做的配置
新建的 Vue 项目（如用 create-vue 或 npm create vue@latest）生成的是标准结构，但 VSCode 默认不会启用 Volar 的“Take Over Mode”：
- 打开任意
.vue文件，右下角状态栏会出现Vue字样；点击它 → 选择Take Over Mode（不是Extension Mode） - 该操作会临时禁用 TypeScript 官方插件对
.vue文件的处理，避免类型重复或冲突 - 如未手动切换，
ref()的类型提示可能丢失，defineProps()泛型无法推导，模板中属性名敲错也不会报错
调试时 debugger 不生效？检查 launch.json
Vue 项目默认是打包后运行（npm run dev 启动的是 Vite 或 Vue CLI 的 dev server），源码映射（source map）必须开启且被 Chrome/Edge 正确加载：
立即学习“前端免费学习笔记（深入）”；
- 确保
vite.config.ts中build.sourcemap设为true（开发时默认开启，但自定义配置可能关掉） - VSCode 的
.vscode/launch.json应使用chrome或msedge调试器，并设置"url": "http://localhost:5173"（端口需与 Vite 输出一致） - 不要用
node类型调试器去 Attach Vue 前端代码——那只能调试 Node 环境下的构建脚本
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
模板中方法调用没提示？检查 script 标签的 lang 属性
Volar 的类型能力高度依赖 <script></script> 标签是否显式声明语言和模式：
-
<script setup lang="ts"></script>✅ —— 启用完整类型支持 -
<script setup></script>❌ —— 默认按 JS 解析，defineProps()泛型无效，ref类型不收敛 -
<script lang="ts"></script>✅ —— 选项式 API 也能获得类型提示，但需手动写defineComponent({}) - 即使项目用 JS 开发，也建议写
lang="ts"并配// @ts-check，否则 Volar 很多特性直接不触发
最容易被忽略的是：Volar 的 Take Over Mode 是**按工作区文件生效的**，不是全局开关。如果同时打开多个 Vue 项目文件夹，每个都得单独点一次右下角切换——不切，就等于没开。
