必须安装v2.1.45兼容版并勾选设置项、重载窗口,因atom v1.60+移除了旧dom结构导致默认插件css注入失败;还需启用tree-view的show icons开关,确保grammar识别正确且项目级config.cson配置有效。

装了 file-icons 却没图标?不是插件没装上,而是 Atom v1.60+ 和默认安装的版本根本不兼容——CSS 注入链断了,树视图里只剩空白方块或默认文档图标。
为什么 apm install file-icons 装完不显示图标
默认 apm install file-icons 拉的是已停更的主干分支,它依赖的 DOM 结构在 Atom v1.60+ 中已被移除。现象是:Settings 里插件状态为 enabled,但 tree-view 无任何变化;右下角 grammar 显示正常(如 JavaScript),图标仍不出现。
- 必须用兼容版安装:
apm install https://github.com/file-icons/atom/releases/download/v2.1.45/file-icons-2.1.45.tgz - 装完不能只点 Restart —— 必须进
Settings → Packages → file-icons → Settings,勾选Show icons in tree view和Display file names to the right of icons - 最后执行
Application: Reload Window(快捷键Ctrl+Alt+R或Cmd+Alt+R),否则 CSS 不注入
tree-view 本身要开开关
很多人忽略这个底层开关:file-icons 只负责提供图标 class,真正控制是否渲染图标的是 tree-view 插件自身的设置。
- 路径:
Settings → Packages → tree-view → Settings - 确认
Show Icons已启用(默认开启,但手动关过就不会自动恢复) - 如果启用了
Display file names to the right of icons,但图标挤到右边、文字被截断,说明宽度计算异常,不是插件问题
自定义图标规则写在哪、怎么生效
项目级规则只认项目根目录下的 config.cson,写在 ~/.atom/config.cson 里完全无效;匹配靠 priority 控制,不是后写覆盖前写。
- 例如给
.env加锁形图标:"Env File": icon: "lock" match: ".env" - 正则匹配必须加
i标志:match: /\.test\.js$/i,否则大小写敏感导致不生效 - 想按路径匹配(如只匹配
src/test/下的 JS):matchPath: true+match: /src\/test\/.*\.js$/ - 多个规则冲突时,
priority: 2的会压过没写priority的(默认为 0)
图标错位、颜色发灰、文字遮挡怎么办
这不是插件 bug,是 Atom 对图标宽度估算不准,或主题 CSS 覆盖了颜色变量。别改插件源码——升级就丢。
- 修复图标宽度:
~/.atom/styles.less里加.tree-view .icon:before { width: 16px !important; } - 补文字左边距:
.tree-view .file .name { padding-left: 24px; } - 颜色不对?检查
colour值是否在styles/colours.less里有定义,比如"medium-red"合法,"#ff0000"直接写会失效 - 禁用所有其他图标类插件(如
atom-material-icons),二者不可共存
真正容易被卡住的点不在安装步骤,而在 grammar 识别和配置作用域——文件右下角显示 Plain text 就别指望 JS 图标出现,项目级 config.cson 写错位置或漏 priority 也根本不会触发。这些细节一漏,重装十遍也没用。











