怎样配置VSCode来完美支持Vue.js开发？_语法高亮与智能提示设置【教程】

必须安装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；多人协作时，这个动作常被跳过，结果就是“别人能提示，我不能”。