pigments 不显示颜色块是因为未触发扫描,需满足文件类型、语言模式和配置三者严格匹配,且必须重载窗口生效。

为什么装了 Pigments 却看不到颜色块?
不是插件没装好,而是它根本没被触发——Pigments 默认只扫描特定语法作用域下的字面量颜色值,且对文件类型、语言模式、配置项三者要求严格匹配。
- 右下角状态栏必须显示
source.css、source.scss或text.html.basic(且光标在<style></style>块内),若显示text.plain或source.js(未手动配置)则完全跳过 - 仅识别标准写法:
#abc、#aabbcc、rgb(255,0,0)、hsl(0,100%,50%)、red;不识别var(--primary)、$color、"#" + color或注释里的// #ff0000 - 文件未保存时默认为
text.plain,Pigments 不处理;保存后需手动点击右下角语法选择器,设为对应语言(如 CSS)
如何让 Pigments 支持 Vue / JS 文件中的颜色?
默认它只扫 .css、.scss 和 HTML 的 <style></style> 块,Vue 的 <style scoped></style> 或 JS 里 ctx.fillStyle = "#f00" 必须显式授权。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 打开
Settings → Packages → pigments → Settings - 在
Supported Grammars输入框中添加对应作用域:source.css.vue(Vue style 块)、source.js(JS 全局)、text.html.basic(HTML 全局) - 若加了
source.js,务必同步填入Ignore Scopes:如string.quoted.other(跳过注释)、comment.line(避免假匹配) - 改完必须执行
Window: Reload或彻底重启 Atom,配置才加载
Pigments 在 Atom 1.59+ 上完全失效怎么办?
不是你操作错,是官方 API 已移除——Atom 1.59+ 彻底删除了 Pigments 依赖的 TextEditor::onDidChange 等接口,插件必然崩溃报错 Cannot read property 'onDidChange' of undefined。
- 唯一可行路径:降级 Atom 到
1.58.0(官网仍提供旧版下载) - 或手动安装最后兼容版本
v0.40.2:
下载 ZIP → 解压 → 终端执行apm link --dev /path/to/pigments-0.40.2→ 重启 Atom - 注意:2022 年底 apm 服务器已关闭,
apm install pigments必然失败,报错getaddrinfo ENOTFOUND atom.io
颜色块卡顿、延迟几秒才出现?
默认开启 scanWholeProject,遇到 node_modules 或 dist 目录会疯狂递归扫描,内存飙升、响应迟滞。
- 进 Pigments 设置页,关闭
scanWholeProject,只处理当前打开的文件 - 在
ignoredNames中填入:node_modules、dist、build、.git - 禁用
showPalette(右下角颜色面板),它是持续监听文件变化的性能主力拖累源 - 把
Marker Type改为dot:比outline或background渲染更快,视觉干扰也小
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










