color highlight插件默认只识别字面量颜色（如#fff、rgb(255,0,0)），不解析css变量、js动态拼接或模板字符串中的颜色值；需手动配置colorhighlight.customcolors等选项才能支持var(--primary-color)等写法。
Color Highlight 插件本身不改代码、不介入编译流程，只做颜色值的视觉渲染——但如果你发现某些颜色没高亮，大概率不是插件坏了，而是它根本没“认出来”那是颜色。
为什么 var(--primary-color) 不渲染？
Color Highlight 默认只识别字面量颜色（如 #fff、rgb(255, 0, 0)），对 CSS 变量、JS 动态拼接、模板字符串里的颜色值完全无视。它靠正则匹配，不是 AST 解析。
- 必须手动开启变量支持：在
settings.json中添加"colorHighlight.languages": ["css", "scss", "less", "javascript"]，并确保启用了"colorHighlight.customColors"扩展项 - 对
var(--primary-color)这类写法，需额外配置"colorHighlight.customColors"数组，例如："colorHighlight.customColors": [ { "color": "var(--primary-color)", "value": "#4a6fa5" } ] - JS 中的
style.color = 'hsl(200, 100%, 50%)'不会触发高亮——插件不执行 JS，只扫描静态文本
colorHighlight.excludeLanguages 怎么用才不踩坑？
排除语言不是为了“省性能”，而是防误触。比如 Markdown 文件里大量 rgb(255, 255, 255) 出现在表格或说明文字中，会被错误染色，干扰阅读。
- 常见误排：把
typescript加进排除列表——结果const bg = '#ff6b6b';在 TS 文件里也不高亮了 - 正确做法：只排除无语义缩进/无样式含义的语言，如
"markdown"、"plaintext"、"log" - 路径级排除更精准：用
"colorHighlight.excludeFiles"排除特定文件（如README.md或构建产物dist/*.html）
和 Prettier / ESLint 冲突吗？
完全不冲突。Color Highlight 是纯前端渲染层，不影响任何格式化或校验逻辑。但它和 Prettier 的 printWidth 配合不好时，可能让长颜色值（如带空格的 hsl(200 100% 50%)）被折行，导致后半段不被识别。
- 建议关闭 Prettier 对颜色字符串的换行：在
.prettierrc中加"proseWrap": "preserve" - ESLint 的
no-unused-vars等规则也完全无感知——它连变量名都不解析 - 真正要注意的是主题兼容性：深色主题下浅色背景的高亮可能看不清，需调
"colorHighlight.opacity"（默认 0.3，可设为 0.5）
颜色可视化不是“锦上添花”，而是防止手写错值的第一道防线；但它的能力边界很清晰——只管“看起来像颜色”的字符串，不管“运行起来是不是颜色”。别指望它理解 CSS custom properties 的级联逻辑，也别让它承担设计系统 token 同步的责任。
