Vue 3 项目必须用 Volar，Vue 2 项目可用 Vetur；二者不可共存，混用会导致语法高亮错乱、跳转失效、类型提示丢失；Volar 需禁用 Vetur 并配置 tsconfig.json/jsconfig.json 启用 TS 支持。
代码高亮插件不是“越花哨越好”，而是要匹配你当前写的语言、编辑习惯和性能敏感度。装错或堆叠多个同类插件，反而导致语法解析冲突、光标卡顿、甚至 languageId 错乱——比如 Vue 文件里 <script setup></script> 块被当成纯 JavaScript 高亮，TypeScript 类型提示消失。
Vue 项目该用 Volar 还是 Vetur？
Volar 是 Vue 3 官方推荐，Vetur 已归档停更。如果你项目用的是 defineComponent、useSlots 或 <script setup></script>，Vetur 会漏掉类型推导、无法跳转 Composition API 的内部函数，甚至在 .vue 文件中把 ref 当作普通变量处理。
- 新 Vue 3 项目：只装
Volar，禁用Vetur（VS Code 会弹提示，点“Disable All”） - 老 Vue 2 项目：保留
Vetur，但别同时启用Volar，否则template块高亮失效 - 混合项目（如 Vue 2 + Vue 3 共存）：用
Volar的“Take Over Mode”手动切换语言模式，避免自动接管所有.vue
React / TypeScript 项目为什么高亮总“断层”？
常见现象是 JSX 标签高亮了，但 props 类型注解灰白、useState<string>()</string> 里的泛型没颜色——这通常不是插件问题，而是 typescript-language-server 没正确加载，或者 VS Code 默认用了内置 TS 版本而非项目本地版本。
- 检查右下角状态栏的 TS 版本号，点击它 → “Select TypeScript Version” → 选 “Use Workspace Version”
- 确保
jsconfig.json或tsconfig.json存在且包含"compilerOptions": { "jsx": "react-jsx" } - 不要装
Auto Import类插件叠加高亮逻辑，它常劫持import行的语法树，干扰高亮范围
Bracket Pair Colorizer 2 为什么括号不配对？
这不是插件坏了，而是它依赖 VS Code 的语言服务提供括号范围。当文件 languageId 被错误识别（比如 .tsx 被当成 plaintext），或插件未激活对应语言支持时，配色就失效。
- 按
Ctrl+Shift+P→ 输入Change Language Mode→ 确认当前文件是typescriptreact（不是typescript或javascript） - 在
settings.json中加这一行："bracket-pair-colorizer-2.deactivateOtherBrackets": false，避免它被其他插件（如indent-rainbow）静默禁用 - 如果用了 Prettier 自动格式化，检查是否启用了
"prettier.bracketSameLine": true—— 这个选项会改变括号位置，让配对逻辑误判
真正影响高亮效果的，往往不是插件本身，而是语言模式、TS 配置、格式化规则三者之间的咬合精度。一个括号没着色、一行类型没高亮，背后可能是 tsconfig.json 里少了个 "include" 路径，或是 VS Code 缓存了旧的语言包。先查状态栏语言标识，再看输出面板里 Typescript Server Log 有没有报错，比直接换插件更省时间。
