必须安装Volar插件并禁用Vetur，设置语言模式为Vue，配置typescript.tsdk指向本地TypeScript，启用模板插值服务才能实现.vue文件完整语法高亮与类型支持。
VSCode 默认不支持 Vue 单文件组件（.vue）的完整语法高亮，必须手动安装语言支持插件，否则 <template>、<script setup>、<style scoped> 会全部显示为纯文本或错误着色。
必须安装 Volar（不是 Vetur）
Volar 是 Vue 官方推荐的语言服务器，专为 Vue 3 + Composition API 和 script setup 设计。Vetur 已停止维护，且对 <script setup> 支持极差，开启后常导致 defineProps 报错、类型提示失效。
- 在 VSCode 扩展市场搜索并安装
Volar（作者：Vue Team） - 安装后务必禁用已有的
Vetur（右键 → “禁用”），否则两者冲突，.vue文件可能完全无法高亮 - 首次打开
.vue文件时，VSCode 右下角可能弹出“Select language mode”，选Vue（由 Volar 提供），而非HTML或Vue HTML
检查 typescript.tsdk 路径是否正确
Volar 的类型检查和高亮依赖项目本地的 TypeScript 版本。如果项目用了 typescript@5.0+，但 VSCode 仍使用内置旧版 TS，会导致 defineProps<{…}>() 类型推导失败、属性无高亮。
- 在项目根目录创建
.vscode/settings.json - 写入：
{ "typescript.tsdk": "./node_modules/typescript/lib" } - 重启 VSCode 窗口（
Cmd/Ctrl + Shift + P→ 输入Developer: Reload Window）
可选但强烈建议：启用 vetur.experimental.templateInterpolationService（仅限模板内表达式）
如果你在 <template> 中写了 {{ count + 1 }} 却没高亮运算符或变量，说明模板插值服务未启用——这不是 bug，是 Volar 默认关闭该实验功能。
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（
Cmd/Ctrl + ,），搜索volar interpolation - 勾选
Volar > Experimental: Template Interpolation Service - 或在
.vscode/settings.json中添加："volar.experimental.templateInterpolationService": true
真正容易被忽略的是：Volar 启用后，.vue 文件的「语言模式」必须是 Vue，而不是 Vue HTML 或 HTML；右下角状态栏不显示“Vue”字样，高亮就一定不完整——哪怕插件装了、设置写了，这一步漏掉，前面全白忙。
