file-icons不显示图标主因是atom v1.60+与旧版插件不兼容,需安装v2.1.45兼容版,勾选设置项并重载窗口;图标匹配依赖grammar识别、项目级config.cson配置及priority优先级,正则须加i标志,样式问题应通过styles.less而非修改插件源码修复。

装上 file-icons 插件却不显示图标?不是插件坏了,大概率是 Atom 版本(v1.60+)和插件版本不匹配,或者识别链断在了 grammar 这一环。
为什么 file-icons 装了但树视图里还是空白方块
Atom v1.60 及之后版本移除了旧版 DOM 结构,而默认 apm install file-icons 拉的是已停更的主干分支,样式注入直接失败。现象就是:Settings 里插件状态是 enabled,tree-view 却只显示默认文档图标或空格。
- 必须安装兼容版:
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 注入 - 如果右下角状态栏显示的是
Plain text而不是JavaScript,图标也不会出来 ——file-icons依赖 grammar 判断类型,不是只看.js后缀
自定义 .env 或 .config.js 图标要改 config.cson,不是全局配置
项目级图标规则只认项目根目录下的 config.cson,写在 ~/.atom/config.cson 里完全无效。而且规则生效靠 priority 控制,不是“后写覆盖前写”。
- 为
.env文件设齿轮图标:"Env File": icon: "gear" match: ".env" colour: "dark-blue" - 匹配所有测试文件(注意大小写):
"Test JS": icon: "test-js" match: /\.test\.js$/i priority: 2(i标志漏掉就匹配不到MyTest.js) - 想只给
src/test/下的 JS 加图标,得启用路径匹配:matchPath: true+match: /src\/test\/.*\.js$/ - 多个规则匹配同一文件时,
priority数值大的优先 —— 不写默认是 0,所以priority: 2的规则会压过没写 priority 的
图标错位、文字被遮挡或颜色不对,别乱改插件源码
启用了 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; } - 颜色不对?检查你写的
colour值是否在styles/colours.less里有定义,比如"medium-red"是合法的,但"#ff0000"直接写会失效 - 绝对不要去改
packages/file-icons/styles/下的原始 CSS —— 升级插件时会被覆盖,且容易引发冲突
真正卡住人的往往不是“怎么配”,而是“为什么没生效”——优先查 grammar 是否正确、config.cson 是否放在项目根目录、priority 是否冲突、正则是否漏了 i 标志。这些点错一个,规则就静默失效。










