默认语法高亮不够用，因VSCode原生支持仅覆盖基础语言，对Vue单文件组件、TSX、YAML嵌套及Tailwind等DSL缺乏语义级着色，导致关键词不显、结构模糊、括号难配。
为什么默认语法高亮不够用
VSCode 自带的语法高亮对基础 Python、JavaScript 支持尚可，但遇到 Vue 单文件组件（.vue）、TypeScript JSX、YAML 配置嵌套、或自定义 DSL（如 Tailwind 的 class 属性）时，经常出现关键词不着色、标签结构模糊、括号匹配难辨等问题。这不是 bug，而是语言服务没覆盖到语义层级——比如 <script setup> 里的 defineProps 默认不被识别为声明式语法，v-if 和 v-for 也常被当作普通属性忽略。
Vue 开发必须装 Vue VSCode Snippets
它不只是补全代码片段，核心价值在于提供基于 Vue 官方语法规范的高亮规则：支持 <template> 中指令高亮（v-model、@click 等用不同颜色区分）、<script setup> 下的 defineProps/defineEmits 关键字染色、以及 <style scoped> 里 :deep() 和 ::v-slots 的特殊标记。
- 安装后无需额外配置，打开任意
.vue文件立即生效 - 若发现
<script lang="ts">区域高亮异常，检查是否同时启用了Pylance或TypeScript Tuples插件——它们可能与 Vue 解析器冲突，临时禁用即可验证 - 注意：该插件不处理
.md或.astro文件，别指望它给 Markdown 中的 Vue 示例加亮
Bracket Pair Colorizer 2 不是语法高亮，但比高亮还管用
真正卡住开发节奏的，往往不是关键词没颜色，而是括号/标签/引号层层嵌套后找不到配对位置。这个插件用颜色+连线把 {}、[]、()、<>、""、'' 全部可视化，尤其在写长表达式或 JSX 返回值时，一眼就能看出哪层漏了闭合。
- 默认启用，装完重启 VSCode 就行；不需要改设置，改了反而容易错乱
- 和
Highlight Matching Tag同时装没问题，后者专注 HTML 标签配对，前者覆盖所有括号类型 - 性能影响极小，但如果你开 50+ 文件标签页且机器老旧，可考虑关闭
bracketPairColorizer.showBracketsInGutter这个选项
别忽视 vscode-icons 对语法感知的间接帮助
它不改变代码内高亮，但通过文件图标快速区分 index.vue（Vue 图标）、config.ts（TS 图标）、tailwind.config.js（JS 图标），让你在侧边栏一眼定位到要编辑的文件类型。这对大型项目特别关键——你不会在一堆 .js 文件里误点一个本该用 TS 处理的配置文件，从而避免因语言服务加载错误导致的高亮失效。
- 安装后按
Ctrl+,搜索Icons Theme，选VSCode Icons即可激活 - 如果项目里混用
.svelte或.qwik文件，vscode-icons默认不支持，得手动在settings.json里加"vsicons.associations.files"映射 - macOS 用户建议直接装
vscode-icons-mac，图标风格更统一，不会出现文件夹图标和系统风格割裂的情况
高亮插件装太多反而会让语言服务器抢资源，优先保证 Vue VSCode Snippets + Bracket Pair Colorizer 2 这两个跑稳，再按需叠加。真正在意某类语法（比如 GraphQL 片段或 SQL in JS 字符串），就单独搜对应插件，别无脑堆砌。
