colorhelper 是 sublime text 4 下唯一稳定支持现代颜色语法的实时预览插件,其功能依赖语法作用域而非正则匹配,若状态栏显示 plain text 则不触发;需手动设置正确语法(如 css、scss),vue 中 style 块须用 source.css.postcss 等;css 变量需启用 enable_color_variables 且定义与使用同作用域;默认快捷键 alt+shift+c 易冲突,可借助 findkeyconflicts 检查;colorhighlighter 专注基础颜色高亮,colorhelper 侧重语义识别与操作,二者互补。

ColorHelper 是 Sublime Text 4 下唯一能稳定支持现代颜色语法(如 oklch()、display-p3、color-mix())的实时预览插件,ColorPicker 已彻底失效,装了也白装。
为什么 ColorHelper 预览不显示?90% 是语法作用域没对
Sublime 不靠正则硬扫字符串,而是依赖文件当前的语法作用域(scope)来决定是否启动颜色分析。如果右下角状态栏显示的是 Plain text,哪怕你写的是 #3b82f6,ColorHelper 根本不会触发。
- 右键 →
Set Syntax→ 选CSS、SCSS、JavaScript、Vue(注意:Vue单文件组件中<style></style>块需用source.css.postcss或source.css.scss,不能只用source.css) -
HTML文件里内联style="color: red",必须把光标停在style属性值内部,且语法模式得是CSS,不是HTML - 模板字符串中
el.style.color = "${bg}"只有bg是字面量(比如const bg = "hsl(0, 100%, 50%)";)才可能识别;变量引用本身不被解析
var(--primary) 能不能预览?取决于配置和上下文
ColorHelper 默认不处理 CSS 变量,但可以开启变量解析支持——前提是变量定义和使用都在同一作用域内,且语法识别准确。
- 打开
Preferences → Package Settings → ColorHelper → Settings - User - 添加或确认启用:
"enable_color_variables": true - 仅对
var(--primary)这类标准 CSS 自定义属性生效;env(--safe-area-inset-top)或 Sass 变量$color不支持 - 变量值必须是合法颜色格式(如
--primary: #007acc),若定义为--primary: var(--secondary),链式引用不会展开
快捷键按了没反应?先查 keymap 冲突
ColorHelper 默认调色面板快捷键是 Alt+Shift+C(Windows/Linux)或 Opt+Shift+C(macOS),但极易被用户自定义快捷键覆盖。
- 路径检查: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,看是否有其他命令占位 - 删掉冲突项,或改成更冷门组合(如
alt+ctrl+shift+c),保存后立即生效,无需重启 - 顺手装个
FindKeyConflicts插件,以后一键扫全量冲突
ColorHighlighter 和 ColorHelper 到底该选谁?
两者定位不同,不是替代关系,而是互补:前者专注“高亮渲染”,后者专注“语义识别 + 操作能力”。
-
ColorHighlighter在行内直接渲染背景色块,视觉冲击强,但只认基础格式(#fff、rgb()、red),不支持oklch()、var()、color-mix() -
ColorHelper不强制渲染背景,但能悬停弹窗、右键转换、呼出调色面板、支持变量解析——它把颜色当“数据”处理,不是“样式” - 真要兼顾:两个都装。但注意
ColorHighlighter的"enable_on_save": false要设好,否则保存时卡顿;ColorHelper的"scan_strings": true小心开启,性能敏感项目慎用
真正容易被忽略的是:预览能力不是插件“有没有装对”的问题,而是 Sublime 当前是否把它当“颜色上下文”处理——这完全由语法作用域驱动,和颜色写法正确性无关。哪怕 rebeccapurple 写得再标准,语法模式错了,照样没反应。











