colorhelper仅实时预览被sublime识别为color作用域的颜色字面量,不处理字符串内颜色、跨文件css变量或非法格式;需确保语法正确、启用enable_color_variables且快捷键未冲突。

ColorHelper 能实时预览行内颜色,但不是所有“看起来像颜色”的字符串都会触发——它只响应被 Sublime 正确识别为 color 作用域的字面量,且默认跳过字符串内容。
为什么光标停在 #3b82f6 上没反应?先看右下角语法状态
Sublime 不靠正则匹配颜色,而是查当前光标位置的语法作用域(scope)。如果右下角显示 Plain text、HTML 或 source.vue,插件根本不会启动。
- CSS 文件:右键 →
Set Syntax→ 选CSS(不能是Plain text) - .vue 中
<style></style>块:必须设为source.css.postcss或source.css.scss;source.css不够用 - HTML 内联 style:
<div style="color: #ff0000">,光标得停在 <code>#ff0000内部,且语法模式必须是CSS(不是HTML) - 验证方式:光标停在颜色上,按
Ctrl+Shift+P→ 输入Developer: Show Scope Name,输出里要有constant.other.color或support.constant.color - 如真需支持(比如写 CSS-in-JS demo),打开
Preferences → Package Settings → ColorHelper → Settings - User - 添加或确认:
"scan_strings": true(注意 JSON 格式:双引号、逗号、花括号一个都不能少) - 保存后,光标停在字符串内字面量颜色值上才可能生效;
${bg}这类变量引用依然不识别 - 开启后建议搭配
color_highlight_in_strings关闭(若同时装了 ColorHighlighter),避免双重扫描卡顿 - 必须在用户设置中启用:
"enable_color_variables": true - 变量定义(如
--primary: #3b82f6;)和使用(如color: var(--primary);)必须在同一个文件、同一语法作用域内 ——vars.css定义 +main.css使用,不会解析 - 变量值本身必须是合法颜色格式:
--primary: hsl(210, 75%, 50%)可以,--primary: var(--secondary)或--primary: unset不会触发 -
env(--safe-area-inset-top)、Sass 变量$color、Less 变量@color全都不支持 - 路径检查:
Windows 是C:\Users\XXX\AppData\Roaming\Sublime Text\Packages\User\Default (Windows).sublime-keymap
macOS 是~/Library/Application Support/Sublime Text/Packages/User/Default (OSX).sublime-keymap - 用 Sublime 打开该文件,搜索
alt+shift+c或ctrl+shift+c,看是否有其他命令占用了它 - 推荐用
FindKeyConflicts插件一键检测冲突,比手动翻更可靠 - 临时替代方案:光标停在颜色上,右键 →
ColorHelper: Show Palette
JS 字符串里的颜色怎么预览?慎开 scan_strings
默认情况下,el.style.color = "#3498db" 或模板字符串中的 `background: ${bg}` 都不会触发预览——因为变量引用无法静态解析,强行扫描会拖慢响应、误触发多。
var(--primary) 能不能预览?取决于三件事同时满足
ColorHelper 默认不处理 CSS 变量,启用后也只支持标准定义与使用在同一作用域内的场景,不是所有 var() 都能展开。
快捷键冲突导致 Alt+Shift+C 没反应?查 keymap 文件
ColorHelper 默认调色面板快捷键是 Alt+Shift+C(Windows/Linux)或 Opt+Shift+C(macOS),极易被其他插件或自定义键位覆盖。
最常被忽略的点是:预览依赖“语法作用域 + 光标位置 + 用户配置”三者同时成立,缺一不可;哪怕只错一个,就静默失效——它不报错,也不提示,只是什么也不做。











