color highlight插件默认支持hex、rgb、hsl等颜色格式并渲染色块，但需确保vscode内置的editor.colordecorators启用，且语言模式正确（如css/scss/html）；不支持rgb()/hsl()/var()为设计限制，js/ts字符串需手动配置colorhighlight.languages和occurrencesinstrings。
VSCode 里代码高亮不是靠编辑器默认就能“全量覆盖”的——很多注释、颜色值、TODO、自定义标记，默认根本不会高亮。想让关键信息一眼抓住，必须装对插件，且得配对配置。
Color Highlight：CSS 颜色值不显示？装它就对了
写 CSS 时 background-color: #ff6b35 或 color: hsl(200, 100%, 50%) 看着只是文本，没法直观感知效果。Color Highlight 插件会直接在代码旁渲染出对应色块，支持 HEX、RGB、HSL、RGBA、CSS 变量（如 --primary-color）等全部主流格式。
- 安装后无需额外设置，开箱即用；但若发现某些颜色没高亮，检查是否被其他插件（如 Prettier）的格式化规则干扰了语法范围
- 不支持自定义颜色别名映射（比如把
theme.red当作颜色识别），需要配合colorize或手动加正则规则（高级用法） - 性能影响极小，但在超大 CSS 文件中（>5k 行）可能轻微拖慢滚动响应——此时建议在
.vscode/settings.json中关闭该文件类型："color-highlight.languages": ["css", "scss", "less", "postcss"]
Todo Highlight：TODO/FIXME 注释总被忽略？让它发光
写 // TODO: 优化缓存策略 很容易，但真到上线前翻一遍所有 TODO？几乎没人做。Todo Highlight 把这类注释变成荧光笔效果，还能一键列出全部位置。
- 默认只匹配
TODO和FIXME，如需支持NOTE或HACK，在设置里改todo.highlight.keywords数组即可 - 高亮颜色太刺眼？修改
todo.highlight.defaultStyle中的backgroundColor和color值，推荐用半透明白底+深灰字，兼顾醒目与可读 - 注意：它不会扫描
/* */多行注释里的 TODO（除非开启todo.highlight.includeComments），而只认行内注释//和#（Python/Shell 场景）
Vetur / Volar + 自定义语言高亮：Vue SFC 里 template/script/style 各自高亮错乱？
Vue 单文件组件（.vue）本质是混合语法，VSCode 默认无法统一处理三块区域。Vetur（Vue 2）或 Volar（Vue 3）不只是补全工具，它们重写了语法注入逻辑，让 <template></template> 用 HTML 规则、<script></script> 用 TypeScript 规则、<style></style> 用 SCSS/CSS 规则各自高亮。
- Volar 是 Vue 3 官方推荐，对
<script setup></script>支持更准；Vetur 在老项目中兼容性更好，但遇到 Composition API 新语法可能漏高亮 - 如果
<style scoped></style>里:deep()或::v-deep选择器没高亮，说明插件未识别这些伪类——这是正常现象，它们属于运行时特性，非标准 CSS 语法 - 禁用其中一个插件后，务必重启 VSCode，否则旧语法注入残留会导致
.vue文件部分区域变白（无高亮）
Prettier + ESLint 冲突导致高亮异常？先关掉格式化再排查
有时你发现刚写的 JSX 或 Vue 模板突然高亮错乱，比如 className 变灰、v-if 不上色，大概率不是高亮插件坏了，而是 Prettier 格式化中途报错，触发了 VSCode 的“语法解析降级”——编辑器退回到基础文本模式渲染。
- 看右下角状态栏：如果显示
ESLint: ❌或Prettier: formatting failed，先按Ctrl+Shift+P运行Developer: Toggle Developer Tools，查 Console 里是否有RangeError或Invalid regular expression - 临时解决：在当前文件加
// prettier-ignore顶行，或关掉editor.formatOnSave，确认是否高亮恢复 - 根因常是
.prettierrc里用了不兼容的选项（如arrowParens: "avoid"在旧版 Prettier 中无效），或 ESLint 规则和 Prettier 冲突（比如semi: truevsno-extra-semi）
高亮不是装饰，是信息通道。真正容易被忽略的，是不同插件之间的语法作用域交叠——比如 Color Highlight 和 Volar 都在处理 <style></style> 区域，一个负责颜色，一个负责 SCSS 解析，一旦配置冲突，高亮就会局部失效。调的时候别只盯着单个插件，要看整个语言服务链路是否通畅。
