必须安装Volar插件并禁用Vetur，设置语言模式为Vue，配置typescript.tsdk指向本地TypeScript，启用模板插值服务才能实现.vue文件完整语法高亮与类型支持。

VSCode 默认不支持 Vue 单文件组件（.vue）的完整语法高亮，必须手动安装语言支持插件，否则 <template></template>、<script setup></script>、<style scoped></style> 会全部显示为纯文本或错误着色。

必须安装 Volar（不是 Vetur）

Volar 是 Vue 官方推荐的语言服务器，专为 Vue 3 + Composition API 和 script setup 设计。Vetur 已停止维护，且对 <script setup></script> 支持极差，开启后常导致 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() 类型推导失败、属性无高亮。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 在项目根目录创建 .vscode/settings.json
• 写入：

  {
    "typescript.tsdk": "./node_modules/typescript/lib"
  }

• 重启 VSCode 窗口（Cmd/Ctrl + Shift + P → 输入 Developer: Reload Window）

可选但强烈建议：启用 vetur.experimental.templateInterpolationService（仅限模板内表达式）

如果你在 <template></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”字样，高亮就一定不完整——哪怕插件装了、设置写了，这一步漏掉，前面全白忙。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！