Color Highlight插件不显示色块，首要原因是VSCode内置的editor.colorDecorators设置为false——这是所有颜色装饰的总开关，必须设为true；其次需手动配置color-highlight.languages支持JS/TS字符串及正则pattern，且v2.5.0+才支持#RGBA。
Color Highlight 插件装了但颜色值旁没色块？不是插件坏了，八成是 editor.colorDecorators 被关了——这是所有颜色预览的底层总开关，关掉它，插件再怎么配都白搭。
editor.colorDecorators 必须为 true
VSCode 内置的这个设置控制所有颜色装饰（包括 Color Highlight 渲染的小色块），它独立于插件开关存在。很多人只开 color-highlight.enable，却忘了这层。
- 按
Cmd + ,（macOS）或Ctrl + ,（Windows/Linux）打开设置，搜colorDecorators - 确认
Editor > Color Decorators已勾选；若灰色不可点，说明被工作区覆盖，需手动在.vscode/settings.json里加："editor.colorDecorators": true - 远程开发（SSH/WSL/Container）时，该设置必须在远程端启用，本地设了无效
- 改完不用重启，但建议关闭再重开当前文件，或执行
Developer: Reload Window
JS/TS 字符串里的 #ff6b6b 怎么高亮
默认不生效——插件设计上只扫描样式类语言（css、scss、html），JS/TS 字符串属于“运行时上下文”，需手动声明规则。
- 打开
settings.json（设置页搜 “Color Highlight” → “Edit in settings.json”） - 用对象数组写法配置
color-highlight.languages，不能只填字符串："color-highlight.languages": [{"language":"javascript","pattern":"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'|`#[0-9a-fA-F]{3,8}`"},{"language":"typescript","pattern":"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'|`#[0-9a-fA-F]{3,8}`"}] -
{3,8}同时覆盖#rgb、#rrggbb、#rrggbbaa，但仅 v2.5.0+ 支持 alpha 位（如#ff6b6b80） - 单引号、双引号、反引号都得写全，漏一种写法（比如
'#3498db'）就不会匹配
色块位置偏、太小、rgba 显示不对
这不是 bug，是配置粒度没对上，或者主题干扰了渲染效果。
-
colorHighlight.size默认 12，在高分屏上易糊，建议设为16或20；colorHighlight.position只接受"left"、"right"、"both"，填"top"或数字无效 -
rgba(255, 107, 107, 0.5)看起来太淡？大概率是主题背景太亮（比如Default Light+），换到Dark+对比立刻清晰 -
#ff6b6b80显示成不透明色块？检查插件版本是否 ≥ v2.5.0；老版本只认{3,6}，会把后两位当普通字符丢弃 - 想统一调透明度，用
colorHighlight.defaultAlpha（默认约 0.2），设为0.4可提升浅色主题下的辨识度
Vue/Svelte 的 style 标签和内联样式支持差异
新版 Color Highlight 对 <style> 块原生支持，但 <template> 中的 style="color: #f00" 是否生效，取决于 VSCode 是否把那段 HTML 当作 html 模式处理。
- 确保
color-highlight.languages包含"vue"（不是靠"html"覆盖）；Svelte 同理要加"svelte" - 如果
<template>里仍不亮，右下角点语言模式，确认当前区域识别为html或svelte，而非plaintext -
var(--primary)类 CSS 变量永远无法被静态解析，任何插件都做不到实时映射——别花时间调试它
最常被忽略的其实是 editor.colorDecorators 的状态，尤其在多人协作项目中，它可能被 .vscode/settings.json 静默关掉；其次就是 JS/TS 字符串配置里漏掉反引号或正则转义，导致部分写法失效。这些细节不细看日志，很难定位。
