color-helper在atom中默认不启用行内色块预览，需手动开启“enable inline swatches”并配置匹配的语法选择器（如.source.css、.source.scss等），否则#ff6b6b等合法颜色值不会显示预览方块；仅支持#abc、rgb()、hsl()等基础格式，不支持color(display-p3)等新函数。
Color-Helper 插件在 Atom 中默认不会自动在代码行旁显示颜色预览方块——它需要手动触发或配置启用「inline swatch」模式，否则只响应快捷键调用。
为什么写 #ff6b6b 没反应？检查 inline 模式是否开启
Color-Helper 默认禁用行内色块（inline swatch），即使你写了合法的十六进制、RGB 或 HSL 颜色值，也不会自动渲染小方块。必须显式启用该功能：
- 打开 Atom 设置 → Packages → 搜索
color-helper→ 点击 Settings - 勾选
Enable Inline Swatches（关键开关） - 确认
Inline Swatch Selector包含你当前用的语法，比如.source.css, .source.scss, .source.less, .source.js, .source.ts - 若编辑的是 HTML 内联
style或 Vue/React 的模板字符串，需额外把.text.html.basic或对应语法范围加进去
rgb(255, 107, 107) 和 hsl(0, 50%, 70%) 能显示吗？看解析器支持范围
Color-Helper 的 inline 预览依赖内置颜色解析器，不是所有格式都默认生效：
- ✅ 原生支持：
#abc、#aabbcc、rgb()、rgba()、hsl()、hsla()、transparent、预定义色名（如tomato） - ⚠️ 不支持：
color(display-p3 ...)、lab()、lch()（新版 CSS 颜色函数，插件尚未适配） - ⚠️ JS 模板字符串中需确保字符串被识别为 CSS 上下文，例如
const style = `color: ${c};`不会触发，但el.style.color = 'hotpink';会
预览方块位置错乱或遮挡文字？调整 inlineSwatchWidth 和 inlineSwatchHeight
Atom 的行内装饰（decoration）机制对字体宽度敏感，等宽字体下预览方块可能偏移或挤压文字：
- 在 Color-Helper 设置页，把
Inline Swatch Width和Inline Swatch Height都设为16（默认是14，小字号下易错位） - 关闭
Use Editor Font Size，改用固定像素值，避免随编辑器缩放抖动 - 如果使用了
font-family: "Fira Code", monospace;这类连字字体，建议临时切换为普通monospace测试是否是连字干扰渲染
最常被忽略的是 inline selector 的语法范围匹配——哪怕只漏了一个 .source.vue，Vue 单文件组件里的 :style="{ color: '#333' }" 就不会出方块。开调试模式（atom --dev）+ 打开开发者工具，检查元素是否被插入到 .highlights 下，能快速定位是解析失败还是样式覆盖问题。
