VSCode开发必备的颜色高亮插件分享-VSCode-PHP中文网

color highlight 插件不工作主因是 vscode 内置的 editor.colordecorators 设置被关闭；需检查全局及工作区 settings.json 中该值为 true，且远程开发时须在远程端启用；函数式颜色和 css 变量需手动配置或换用 colorize 插件。

vscode开发必备的颜色高亮插件分享

插件本身不控制色块是否显示，真正起作用的是 VSCode 内置的 editor.colorDecorators 设置。关掉它，Color Highlight 再怎么装也看不到色块。

常见误判是“插件没生效”，实际是这个总开关被手动关了：

打开设置（Cmd + , 或 Ctrl + ,），搜索 colorDecorators，确认 Editor > Color Decorators 已勾选（对应 JSON 是 "editor.colorDecorators": true）
检查工作区设置：.vscode/settings.json 里有没有 "editor.colorDecorators": false——它会覆盖全局设置
用远程开发（SSH/Containers）时，该设置必须在远程端生效，本地设了无效

Color Highlight 默认只识别字面量：十六进制（#fff、#ffffff）、预定义色名（red、transparent）。函数式写法和变量无法静态解析。

想让 rgb(255, 0, 0) 或 hsl(0, 100%, 50%) 渲染，得手动加规则：

在 settings.json 中配置 colorHighlight.customColors，例如：{"pattern": "rgb$\d+,\s*\d+,\s*\d+$", "color": "$0"}
更简单的方式是换用 Colorize 插件（原生支持函数式）
var(--primary) 类 CSS 变量永远无法被静态分析，任何插件都做不到实时映射，别浪费时间调试

插件默认只对 css、scss、html 等语言启用。JS/TS 字符串里的颜色（如 style.backgroundColor = "#00ff00"）默认不扫描。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

需在 settings.json 中显式加入语言 ID：

"colorHighlight.languages": ["css", "scss", "html", "javascript", "typescript", "vue"]
注意误标干扰：比如日志字符串 console.log("#ff0000") 也会被高亮，可配合 colorHighlight.exclude 排除特定路径或模式
确保文件语言模式正确：右下角状态栏显示 JavaScript 而非 Plain Text；若为 Plain Text，点击切换

插件默认用半透明叠加（如 rgba(0, 255, 0, 0.2)），在浅色主题下易被淹没，在深色主题下可能过重。

这不是 bug，是留出的自定义入口：

全局调整透明度："colorHighlight.defaultAlpha": 0.4
为特定格式单独控制，用 colorHighlight.customColors 配置数组，例如：{"pattern": "#[0-9a-fA-F]{3,6}", "color": "rgba(0, 0, 0, 0.1)"}
边框可启用："colorHighlight.border": true，提升浅色背景下的辨识度

真正难处理的是跨文件颜色变量映射和运行时计算值——这类问题没有通用解，得靠人工约定或工具链集成，别指望一个轻量插件搞定。