file-icons图标不显示主因是tree-view的Show Icons开关关闭或项目级config.cson语法错误;需通过开发者工具检查文件节点是否有icon-xxx类和正确data-name来确认底层注入是否成功。

file-icons 插件图标不显示?大概率是 tree-view 的 Show Icons 开关被关了,或者项目级 config.cson 语法出错——不是插件没装好,而是这两处没配对。
怎么确认 file-icons 真生效了
别只看左侧面板有没有图标,得验证底层是否注入成功:
- 打开开发者工具(
View → Developer → Toggle Developer Tools) - 在 Elements 面板里找一个文件节点,比如
<span class="name icon icon-file-text" data-name="README.md"> - 检查是否存在
icon-xxx类(如icon-js、icon-env)和正确的data-name - 如果类名是
icon-file-text但没有icon-js,说明匹配规则失效;如果连icon类都没了,说明Show Icons被关或主题覆盖了.icon { display: none }
项目级 config.cson 自定义图标和颜色
全局配置(~/.atom/config.cson)优先级低、维护难,真要自定义,直接在项目根目录建 config.cson:
- 语法必须是纯 CSON(不是 JSON),结尾不能有逗号,字符串用双引号
- 匹配文件扩展名:写
".env": "lock",不是"lock"或"icon-lock" - 匹配正则路径:用
matchPath: true+match: /src\/test\/.*\.js$/i,注意反斜杠要双写 - 颜色只能用预设名:
"dark-blue"、"medium-red",这些定义在styles/colours.less里,不能直接写#ff0000 - 优先级靠
priority控制,数值越大越先匹配,避免规则被更宽泛的默认规则盖掉
示例(项目根目录 config.cson):
"*":
"file-icons":
"associations":
".env": "lock"
".yml": "gear"
"customisations":
"Env File":
icon: "gear"
match: ".env"
colour: "dark-blue"
priority: 10
改图标大小和颜色要动哪些文件
想调整个别图标尺寸或换色方案,别碰插件源码,改自己项目的样式:
- 图标大小:在项目 styles 目录下新建
icons.less,加.icon-js:before { font-size: 16px; } - 颜色变量重载:新建
colours.less,覆盖@js-color: #f1e05a;这类变量(注意变量名必须完全一致) - 只对某类文件加边框/悬停效果:用
.icon-packagejson这样的类名写 CSS,:before伪元素控制图标字体,::after可加角标 - 所有样式文件需放在项目根目录
styles/下,Atom 会自动加载;改完不用重启,保存即热更新
为什么 .env 文件没显示锁图标
这是最常卡住人的点:你写了 ".env": "lock",但图标还是默认齿轮——原因往往不在配置本身:
-
tree-view设置里的Show Icons是关闭状态(重装插件不会自动打开它) - 项目根目录有旧版
.file-icons配置文件(已废弃),它会阻止config.cson加载 - 同时启用了
atom-material-icons,两者冲突导致 DOM 注入失败,部分文件类名丢失 - 匹配规则写成
".env": "icon-lock"或"lock-icon",file-icons 只认"lock"这种原始图标名(查src/icons/目录确认)
真正容易被忽略的是:图标显示与否,最终取决于 Tree View 是否允许渲染图标类,而不是插件有没有运行。开关一关,再全的自定义都白搭。

















