VSCode 默认不识别 .vue 文件语法，需安装官方 Volar 插件并禁用 Vetur；正确设置语言模式为 Vue、配置 files.associations、确保 tsconfig.json 或 volar.config.js 存在，且 typescript.tsdk 指向本地版本。
VSCode 默认不识别 .vue 文件的语法结构，直接打开会显示为纯文本或仅高亮 HTML，<script> 和 <style> 块里的 JavaScript、CSS 无法正确解析——这不是配置问题，是缺少语言支持插件。
安装 Volar 扩展（Vue 3 官方推荐）
Volar 是 Vue 官方维护的语言服务器，替代了已归档的 Vetur，对 <script setup>、组合式 API、类型推导支持最完整。
- 在 VSCode 扩展市场搜索
Volar，认准发布者为Vue（蓝标认证） - 安装后**必须禁用 Vetur**：两者冲突，同时启用会导致语法高亮错乱、跳转失效
- 如项目使用 Vue 2，需额外安装
Volar for Vue 2（独立扩展），并关闭 Volar 主体
确保文件关联为 vue
即使装了 Volar，如果 VSCode 没把 .vue 文件当成 Vue 类型处理，高亮仍不会生效。
- 右下角状态栏点击当前语言模式（如 “Plain Text”），选择
Vue - 或按
Ctrl+Shift+P（macOS 为Cmd+Shift+P），输入Change Language Mode→ 选Vue - 永久生效：在
settings.json中添加："files.associations": { "*.vue": "vue" }
检查 TypeScript / JS 插件是否干扰
某些 JavaScript 相关插件（如 JavaScript (ES6) code snippets 或旧版 Auto Import）可能劫持 <script> 块解析，导致 TS 类型提示失效或高亮断层。
立即学习“前端免费学习笔记（深入）”；
- 临时禁用所有非必要插件，只留 Volar + 官方 TypeScript 插件，验证是否恢复
- 确认
typescript.tsdk配置指向项目本地node_modules/typescript，而非全局版本（否则defineProps等宏无法识别） - 若用
jsconfig.json而非tsconfig.json，需确保其中包含"compilerOptions": { "allowJs": true, "checkJs": true }
Volar 的语法高亮依赖于正确的语言服务启动，而语言服务又强依赖项目根目录是否存在 tsconfig.json 或 volar.config.js。没配置文件时，它可能降级为“仅 HTML 模式”，此时连 <script lang="ts"> 都不会触发 TS 解析——这点最容易被忽略。
