Atom编辑器里怎么添加文件类型图标

梦瑶吖_2023

梦瑶吖_2023

2026-07-29

435人浏览

原创

直接安装 file-icons 插件即可开箱即用,覆盖200+主流文件类型,无需手动配置或添加字体;推荐通过atom内置包管理器安装,安装后必须重启才能生效;图标缺失多因文件类型未被正确识别,需右下角手动指定语法或在插件设置中添加后缀映射。

atom编辑器里怎么添加文件类型图标

直接装 file-icons 插件就行,不用手动改配置或加图标字体文件。 它开箱即用,覆盖主流文件类型,包括 .js、.ts、.json、.yml、.gitignore 等 200+ 种,不需要你一个个定义。

安装 file-icons 插件的两种可靠方式

推荐优先用 Atom 内置包管理器,稳定且免依赖冲突:

  • 打开 Atom → File > Settings(Windows/Linux)或 Atom > Preferences(macOS)
  • 点 Install 标签页,搜索 file-icons
  • 认准作者是 file-icons 团队(不是 fork 或重命名版本),点 Install
  • 安装完必须重启 Atom,否则 tree-view 和 tabs 不会显示图标

命令行方式仅适合熟悉 apm 的用户:

笔面通
笔面通

笔面通是一款AI求职招聘工具,最牛AI面试神器,大厂Offer拿到手软。

下载
  • 确保已安装 apm(随 Atom 自带,路径通常在 ~/.atom/bin/apm 或 %LOCALAPPDATA%\atom\bin\apm)
  • 终端执行:apm install file-icons
  • 若提示 apm: command not found,不要用 npm install -g apm —— 那是错的,应重装 Atom 或手动添加 bin 目录到 PATH

为什么有些文件没图标?常见原因和对策

不是插件失效,而是 Atom 没识别出文件类型,或插件未覆盖该后缀:

  • .env、.editorconfig、.prettierrc 这类配置文件,Atom 默认可能归为 text.plain,需手动指定语法:右下角点击当前语言名(如 Plain Text)→ 选对应类型(如 Shell Script、INI、JSON)
  • 自定义后缀如 .vue.ts 或 .astro,默认不支持,得进 Packages > file-icons > Settings,在 File Associations 里加映射,格式为:.astro: html(冒号后填已有支持的类型名)
  • 图标仍不出现?检查是否被其他插件干扰,比如 tree-view 被禁用,或主题 CSS 覆盖了图标样式(可临时切换为 Atom 默认主题验证)

图标颜色/大小调不了?看设置项是否生效

file-icons 的设置项只在重启 Atom 后才完全加载,尤其颜色模式:

  • 进入 Packages > file-icons > Settings
  • Icon Color 设为 Monochrome 后,如果还是彩色,说明主题 CSS 强制设了 color(比如某些暗色主题会覆盖 .icon:before)
  • Icon Size 改为 16px 没反应?确认没在 styles.less 里写死 .file-icon { font-size: 12px !important; } 这类覆盖规则
  • 想微调某类图标位置或间距?别动插件源码,直接在 Atom 的 styles.less(Atom > Styles…)里加局部 CSS,例如:
    .icon[data-name$=".ts"] { color: #007acc; }

真正容易被忽略的是:文件图标依赖 Atom 对文件类型的准确识别,而不是单纯看后缀。比如一个没后缀的脚本文件,即使你把它命名为 deploy,也得先在编辑器里手动设成 Shell Script,file-icons 才会显示对应图标。这点比 VS Code 更“被动”,得养成右下角确认语言模式的习惯。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c语言编程软件有哪些
c语言编程软件有哪些

c语言编程软件有GCC、Clang、Microsoft Visual Studio、Eclipse、NetBeans、Dev-C++、Code::Blocks、KDevelop、Sublime Text和Atom。更多关于c语言编程软件的问题详情请看本专题的文章。php中文网欢迎大家前来学习。

2023.11.02

8559

18

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

2026.10.22

0

15

PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

2026.10.22

0

12

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

2026.10.22

0

16

剧云故事大纲与分场规划教程
剧云故事大纲与分场规划教程

本专题讲解剧云梗概与多级大纲功能,覆盖全局、分集、分场结构生成,以及主线冲突、剧情节点和场次顺序调整。

2026.10.22

0

15

VibeKnow PPT讲解视频教程汇总
VibeKnow PPT讲解视频教程汇总

本专题介绍VibeKnow PPT讲解模式的素材准备、旁白生成、页面节奏、画面呈现与导出设置,适合课程和培训场景。

2026.10.22

0

16

VibeKnow PDF转视频教程合集
VibeKnow PDF转视频教程合集

本专题围绕VibeKnow的PDF转视频功能,讲解文件准备、内容解析、脚本生成、重点可视化及配音字幕检查方法。

2026.10.22

0

12

二狗PPT模板与视觉设计
二狗PPT模板与视觉设计

本专题介绍二狗PPT的职场模板、主题风格与页面版式,覆盖模板切换、色彩选择、内容匹配和正式汇报场景下的视觉优化方法。

2026.10.22

0

13

php漏洞修复方法
php漏洞修复方法

PHP漏洞聚合专题,持续整理PHP最新高危漏洞、CVE安全预警、受影响版本、自查命令及修复方案,覆盖PHP-FPM、Docker、Ubuntu与Linux服务器环境,帮助开发者快速完成漏洞排查、版本升级和安全加固。

2026.10.22

20

31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.9万人学习