color highlight 插件通过正则表达式扫描文本匹配颜色字面量，而非依赖语言服务器；默认仅在css/scss/html等声明式语言中生效，内置正则支持#rgb、#rrggbb、rgb()、hsl()、预定义色名等，js/ts字符串需手动配置language+pattern，且必须重启编辑器窗口才生效。
Color Highlight 插件怎么匹配颜色值
它不靠语言服务器，而是用正则在文本里“扫”颜色字面量。默认只对 css、scss、html 等语言模式生效，因为这些文件里颜色是声明式用途（如 color: #3498db），语义明确。插件内置的正则覆盖了：#rgb、#rrggbb、#rrggbbaa、rgb()/rgba()、hsl()/hsla()、预定义色名（blue、transparent）以及部分 var(--color) 形式。
常见漏匹配场景：
-
javascript或typescript文件中字符串内的颜色（如const bg = "#4a90e2";）——默认不处理，需手动加pattern -
vue单文件组件中<template></template>里的style="color: #ff6b6b"——v2.4.0+ 默认支持，老版本要补"vue"到color-highlight.languages - 注释里的颜色（如
// primary: #3498db）——需设colorHighlight.showColorsInComment: true
为什么 JS 字符串里颜色不显示色块
因为 Color Highlight 默认认为 JS 字符串里的 "#ff0000" 是运行时值，不是样式声明，不参与 CSS 渲染流程，所以跳过解析。要让它生效，必须显式告诉插件：“在这类上下文中，这个字符串格式就是颜色”。
操作步骤：
- 打开设置 → 搜
color highlight languages→ 编辑settings.json - 往
color-highlight.languages数组里加对象，例如：{"language":"javascript","pattern":"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'"} - 注意：
pattern是 JavaScript 正则，必须用双引号包裹整个字符串；{3,8}覆盖#rgb、#rrggbb、#rrggbbaa；单双引号都要写全，否则漏一种就失效 - 改完保存，重启编辑器窗口（仅重载不生效）
editor.tokenColorCustomizations 和 Color Highlight 的区别
editor.tokenColorCustomizations 改的是语法元素的颜色（比如所有 string token 显示为绿色），属于 VSCode 原生词法高亮机制；而 Color Highlight 是叠加在上面的装饰（decoration），它不改变 token 颜色，只在颜色值旁边画一个小色块。
两者互不影响，但容易混淆：
- 你调了
editor.tokenColorCustomizations发现颜色值没变——那是因为它控制的是文字颜色，不是色块 - 你开了 Color Highlight 却看不到色块——先确认
editor.decorations是true（搜这个设置项），再查语言模式和正则是否匹配上 - 色块显示偏灰或透明色不对——大概率是插件版本低于 v2.5.0，不支持
#rrggbbaa的 alpha 解析，升级即可
自定义 pattern 时最容易踩的坑
写正则本身不难，难在 VSCode 对 JSON 和正则的双重转义要求。一个看似正确的 pattern 在 settings.json 里可能根本不起作用。
典型错误：
- 直接写
/#([0-9a-f]{3}){1,2}/i——错，pattern字段不要斜杠和 flag，只写内部表达式 - 写成
"pattern": "\"#[0-9a-f]{6}\""——错，JSON 里反斜杠要双写："pattern": "\"#[0-9a-f]{6}\""实际等价于"#[0-9a-f]{6}"，但少一个\就解析失败 - 忽略语言 ID 拼写：写
"js"或"JS"都无效，必须是"javascript"（VSCode 内部语言 ID 是固定字符串） - 加了新 language 但没重启窗口——配置不会热加载，必须重启编辑器
真正起作用的 pattern 必须同时满足：正则语法合法、JSON 字符串转义正确、language ID 准确、插件版本支持对应 color format。缺一不可。
