file-icons是Atom唯一稳定维护的文件图标插件,支持按grammar、路径、扩展名等多策略匹配图标;默认优先依据语法高亮类型(而非扩展名)决定图标,可通过项目级config.cson中associations字段按source.ts等grammar scope精确指定typescript等内置图标名,需确保scope准确、大小写敏感且priority足够高。

file-type-icons 并不是一个真实存在的 Atom 插件——你很可能混淆了 file-icons 和其他命名相近的插件(比如已废弃的 file-type-icons 或第三方 fork)。当前 Atom 生态中唯一稳定、维护中、被广泛使用的文件图标插件是 file-icons,它本身已支持按编程语言(grammar)、路径、扩展名、正则等多层策略匹配图标,无需额外安装“file-type-icons”。
如果你的目标是「为不同编程语言定制更精细的侧边栏图标」,直接用 file-icons 就够了,但必须绕过默认行为,手动干预匹配逻辑。
为什么装了 file-icons 却只显示通用 JS/HTML 图标?
因为 file-icons 默认优先依据 Atom 的 grammar(语法高亮类型)决定图标,而不是扩展名。例如:
- 一个
.ts文件如果 grammar 是TypeScript→ 显示 TypeScript 图标 - 同一个
.ts文件如果 grammar 被误判为Plain text→ 只显示空白或默认文档图标 - 一个
.config.js文件 grammar 是JavaScript,但路径含/webpack/→ 可能被 webpack 专用规则捕获,显示 webpack 图标
所以“按语言定制”的前提是:确保 grammar 正确。检查右下角状态栏,点击它手动切换 grammar;长期错判可加 // @ts-check 或 "use strict"; 帮助识别。
如何在 config.cson 中按语言强制指定图标?
项目根目录下的 config.cson(不是 ~/.atom/config.cson)支持基于 grammar scope 的精确匹配。语法如下:
"file-icons":
associations:
"source.ts": "typescript"
"source.jsx": "react"
"source.vue": "vue"
"source.go": "go"
其中 source.ts 是 TypeScript 的 grammar scope 名(可在 DevTools → Elements 中查 .editor 元素的 data-grammar 属性确认),typescript 是图标名(来自插件内置图标表)。关键点:
- scope 名必须准确,大小写敏感,不能写成
typescript或ts - 图标名必须是
file-icons内置支持的,比如typescript、react、rust,不是任意字符串 - 该配置只对当前项目生效,不影响全局
匹配失败的三个高频原因
改了 config.cson 却没反应,大概率卡在这三处:
-
priority冲突:已有更高 priority 的规则(如路径匹配/test/.*\.js$/)覆盖了你的 language 规则,需显式加priority: 10 - 正则缺少
i标志:比如写match: /\.tsx$/但文件是Index.TSX,应写match: /\.tsx$/i - 作用域写错:把
source.tsx误写成text.html.vue或language-typescript—— 后者是旧版 Atom 的 scope,新版已弃用
图标显示异常时别碰 packages/file-icons/styles/
如果图标错位、文字被遮挡、或只显示半个图标,根本原因是 Atom 树视图对图标宽度估算偏差,不是 CSS 写错了。临时修复方案是往 ~/.atom/styles.less 加:
.tree-view .icon:before { width: 16px !important; }
.tree-view .file .name { padding-left: 24px; }
切记:不要修改 packages/file-icons/styles/ 下任何文件——升级插件时会被覆盖,且可能破坏新版本的适配逻辑。


















