Volar是Vue 3唯一推荐的语言服务器，必须禁用Vetur、启用Take Over Mode、设置.vue文件关联为vue模式、确保tsconfig.json存在且未排除node_modules。
VSCode默认语法高亮已经够用，插件只是补充
VSCode 自带的 JavaScript、TypeScript、HTML、CSS 语法高亮质量很高，尤其在启用官方 Pylance（Python）、Volar（Vue 3）或 ESLint 后，语义级高亮（比如变量定义/引用区分、类型推导着色）远超基础词法高亮。所谓“语法高亮插件”，多数是覆盖默认行为或补足特定语言生态缺失——不是越装越多越好，而是按需替换或增强。
Babel JavaScript：ES201X/React/GraphQL 场景下最稳的语法覆盖
如果你写的是带装饰器、JSX、Flow 或 GraphQL 模板字面量的代码，VSCode 默认高亮会漏掉部分节点（比如 @memo 装饰器、gql`...` 字符串）。Babel JavaScript 插件直接复用 Babel 解析器，能准确识别这些非标准但广泛使用的语法结构。
- 安装后无需配置，打开
.jsx、.tsx或含/* @flow */注释的文件即生效 - 不推荐与
Volar同时启用对.vue文件的控制权，否则可能冲突导致 script 区域高亮错乱 - 它不会提升性能，反而略增启动延迟；纯 ES2022+ 项目且不用 React/Flow，没必要装
Volar：Vue 3 + TypeScript 项目唯一应选的语言支持插件
Volar 不是“语法高亮插件”，而是 Vue 3 的完整语言服务器（Language Server），高亮只是副产品。它能正确解析 <script setup> 中的响应式声明、defineProps 类型、useSlots 返回值等，而 Vetur 在这些地方会退化为纯文本着色。
- 必须禁用
Vetur（右键插件 → “禁用工作区”），否则两者争抢.vue文件处理权，高亮和跳转会间歇性失效 - 开启
"vue.preferences.useVolarForVueFiles": true配置项，确保单文件组件全区域受控 - 深色主题下若发现
ref()内部值未高亮，检查是否误启用了Highlight Matching Tag类插件干扰了 token 边界识别
别碰 Color Highlight 和 Bracket Pair Colorizer 来做“语法高亮”
这两个插件常被误列入“语法高亮推荐”，但它们根本不是干这个的：Color Highlight 只匹配颜色字面量（如 #3b82f6、hsl(200, 100%, 50%)）；Bracket Pair Colorizer 仅给括号加色，和语法结构无关。强行用它们“增强高亮”，结果往往是关键词没变色、颜色值却满屏飘红，反而干扰阅读。
真正需要的，是语言服务器级支持（如 Volar、Pylance）或语法扩展（如 Babel JavaScript）。其他所有打着“高亮”旗号的插件，除非你明确知道它解决的是哪个具体 token 类型缺失，否则大概率是添乱。
最易被忽略的一点：高亮效果是否生效，往往取决于当前文件的 language mode 是否正确。右下角状态栏点击语言标识（如 “Plain Text”），手动选成 “JavaScript React” 或 “Vue” 才算真正启用对应插件逻辑——很多人装了插件却没改 mode，然后以为插件坏了。
