必须安装Volar并启用Take Over Mode才能获得完整Vue 3类型支持；禁用Vetur，配置volar.autoInsertAttributeDefaultValue等关键设置，确保shims-vue.d.ts规范且tsconfig.jsx正确。
VSCode 本身不内置 Vue 支持，但通过合理配置扩展和设置，能实现接近“开箱即用”的 Vue 开发体验——关键不在装多少插件，而在 Volar 和 TypeScript Vue Plugin 的协同是否正确。
必须安装 Volar（不是 Vetur）
Vue 3 项目必须用 Volar，Vetur 已停止维护且与 Composition API + TS 类型推导严重冲突。装错会导致 defineProps、defineEmits 提示失效、ref 类型丢失、template 中无补全等典型问题。
- 在扩展市场搜索并安装官方扩展：
Volar（作者：Vue Team） - 安装后务必禁用
Vetur（如有）：右键扩展 → “禁用工作区” - 重启 VSCode，确保状态栏右下角显示
Vue (Volar)而非Vue (Vetur)
启用 Take Over Mode（接管模式）
Volar 默认不接管 .vue 文件的 TypeScript 服务，导致 script 区域类型检查弱、跳转不准、ref/computed 推导失败。
- 按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入Volar: Switch TS Plugin - 选择
Enable（启用接管） - 此时 VSCode 会提示重启 TS 服务，点击确认；之后
script setup中的类型提示明显增强 - 若项目含
shims-vue.d.ts，确保其内容为标准声明（不含多余declare module '*.vue'重复项）
必要设置项（settings.json）
以下配置直接影响语法高亮稳定性与模板内表达式提示质量：
立即学习“前端免费学习笔记（深入）”；
{
"typescript.preferences.importModuleSpecifier": "relative",
"volar.ignoreProjectName": ["node_modules"],
"volar.autoInsertAttributeDefaultValue": true,
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\.vue$",
"cmd": "echo 'Saved ${fileBasename}'"
}
]
}
}
特别注意："volar.autoInsertAttributeDefaultValue" 开启后，输入 v-if 回车会自动补全 v-if="" 并将光标置于引号内；关闭则只补 v-if，需手动加等号和引号。
TSX/JSX 模板支持与常见报错
若项目使用 defineComponent 或 JSX 写法，需额外确认：
-
tsconfig.json中compilerOptions.jsx必须设为"preserve"或"react-jsx" - 确保
node_modules/.volar/type-registry目录存在（Volar 自动生成，首次启用 Take Over 后出现） - 遇到
Cannot find name 'defineProps'：检查script setup是否漏写lang="ts"，且文件名以.vue结尾（非.ts） - 模板中
{{ foo?.bar }}报错：这是 Volar + TS 插件对可选链的解析限制，暂无法完全规避，建议改用{{ foo && foo.bar }}或升级至 Volar v1.10+
最易被忽略的是：Volar 的 Take Over Mode 仅对当前工作区生效，切换文件夹后需重新执行一次 Volar: Switch TS Plugin；多人协作时，这个动作常被跳过，结果就是“别人能提示，我不能”。
