file-icons 在 Atom v1.60+ 需装兼容版 v2.1.45 并手动重载窗口,同时确保 tree-view 的 Show Icons 开启、grammar 正确识别、项目根目录 config.cson 按 priority 配置图标规则。

装 file-icons 插件不等于图标就显示出来——Atom v1.60+ 已移除旧版 DOM 注入机制,直接 apm install file-icons 拉下来的包基本无效,必须用兼容版本并手动触发样式重载。
为什么装了 file-icons 却只看到空白方块
根本不是安装失败,而是新版 Atom(v1.60+)与主干分支插件不兼容:file-icons 依赖的 DOM 结构和 CSS 注入方式已被移除。现象是 Settings 里插件状态为 enabled,tree-view 文件名左侧仍是空格或默认文档图标。
- 卸载当前版本:
apm uninstall file-icons - 安装兼容版 v2.1.45:
apm install https://github.com/file-icons/atom/releases/download/v2.1.45/file-icons-2.1.45.tgz - 重启 Atom 后,进 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 的底层控制项。
- 进 Settings → Packages → tree-view → Settings
- 确认 Show Icons 是开启状态(不是灰色禁用,而是明确打钩)
- 如果右下角 grammar 显示为
Plain text,图标也不会出现;点击该区域 → 手动选成JavaScript、CSS等具体类型 - 打开开发者工具(
Ctrl+Shift+I),检查任意文件节点是否有icon-js类和data-name="index.js"属性;没有说明 grammar 或插件根本没生效
自定义图标只认项目根目录下的 config.cson
全局 ~/.atom/config.cson 里写的图标规则对 file-icons 完全无效。它只读取当前项目根目录下的 config.cson,且靠 priority 决定覆盖顺序。
- 想给
.env加齿轮图标,项目根目录建config.cson,内容为:"Env File":<br> icon: "gear"<br> match: ".env"<br> colour: "dark-blue"
- 匹配所有测试文件:
match: /\.test\.js$/i——i标志不能漏,否则MyTest.js不匹配 - 只作用于
src/test/下的 JS:matchPath: true+match: /src\/test\/.*\.js$/ - 多个规则匹配同一文件时,
priority: 2的胜过没写priority的(默认为 0)
图标错位或文字被遮挡,别改插件源码
启用 Display file names to the right of icons 后,常见问题是图标挤右边、文字截断、颜色发灰——这不是 bug,是 Atom 对图标宽度估算不准,或主题 CSS 覆盖了变量。
- 在
~/.atom/styles.less里加:.tree-view .icon:before { width: 16px !important; } - 若文件名仍被挡住,补上:
.tree-view .file .name { padding-left: 24px; } - 禁用其他图标插件(如
atom-material-icons),二者底层机制冲突,共存会导致空白、错位、滚动卡顿
真正容易被忽略的是:grammar 识别错误、tree-view 自身图标开关关闭、以及项目级 config.cson 的 priority 逻辑——这三处出问题,装再新版本也没用。

















