Atom配置File-Icons插件美化文件图标的步骤-atom-PHP中文网

图标不显示的最常见原因是装错版本：atom v1.60+需卸载旧版并安装兼容版v2.1.45，勾选file-icons设置项，强制重载窗口；图标依赖grammar而非后缀名，须检查右下角语言类型、tree-view开关及dom中icon-js类与data-name属性。

atom配置file-icons插件美化文件图标的步骤

装错版本是图标不显示的最常见原因

Atom v1.60+ 之后，file-icons 主干分支已停更，直接 apm install file-icons 拉下来的包 CSS 根本不会注入，tree-view 里只显示空白或灰色文档图标。

必须卸载旧版并安装明确兼容的版本：

apm uninstall file-icons
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），否则样式表不会重载。

图标依赖 grammar 而非文件后缀名

右下角状态栏显示 Plain text 的文件，哪怕叫 index.js，也拿不到 JS 图标。file-icons 完全不看后缀，只读取当前编辑器的 grammar 类型。

手动切换：右键编辑区 → Grammar → 选对应语言（如 JavaScript、Environment Variables）
长期错判可加识别提示：在空 .env 文件开头写 # .env，在 JS 文件加 "use strict"; 或 // @ts-check
检查 Settings → Packages → tree-view → Settings 中 Show Icons 是否真开着（默认开，但手动关过不会自动恢复）

自定义图标必须写在项目根目录的 config.cson

全局 ~/.atom/config.cson 对 file-icons 完全无效。它只读当前项目根目录下的 config.cson，且靠 priority 控制规则优先级。

Cline

Cline是一款开源免费的AI编程智能体工具。

下载

示例（项目根目录下 config.cson）：

"file-icons":
  associations:
    ".env": "gear"
    "Dockerfile": "docker"
    "tsconfig.json": "typescript"
  custom:
    "Test JS":
      icon: "test-js"
      match: /\.test\.js$/i
      priority: 2
    "Env File":
      icon: "lock"
      match: ".env"
      colour: "dark-blue"

注意：match 正则必须带 i 标志，否则 MyTest.js 不匹配；matchPath: true 才能按路径匹配（如 /src\/test\/.*\.js$/）；priority 不写默认为 0，数值越大越优先。