File Icons 插件可解决 VSCode 资源管理器图标统一空白问题：需安装插件、启用 VS Code File Icons 主题、自定义 associations 映射、禁用冲突图标主题，并重置缓存以确保正常渲染。
如果您在使用 VSCode 时发现资源管理器中的文件图标全部为默认空白或统一外观，导致难以快速识别文件类型，则可能是 File Icons 插件未启用或配置异常。以下是让文件浏览器图标丰富化、可视化的具体操作方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 File Icons 插件
File Icons 是一个轻量级但高度可定制的图标主题扩展，它通过为不同后缀名和文件夹名称匹配专属 SVG 图标，增强资源管理器的视觉辨识度。
1、打开 VSCode，点击左侧活动栏最下方的扩展图标（四个方块组成的图标）。
2、在扩展市场搜索框中输入 File Icons。
3、在搜索结果中找到作者为 Robb Owen 的官方插件，确认其名称为 VS Code File Icons。
4、点击“安装”按钮，等待安装完成提示后，重启 VSCode。
二、启用图标主题设置
插件安装后需手动激活图标主题，否则资源管理器仍显示默认图标。VSCode 通过内置主题系统控制图标的渲染行为。
1、按下 Cmd + Shift + P（Mac）或 Ctrl + Shift + P（Windows/Linux）打开命令面板。
2、输入并选择 Preferences: File Icon Theme。
3、在弹出的主题列表中，选择 VS Code File Icons。
4、确认资源管理器中的文件夹与文件图标已发生变化，如 .js 显示为橙色齿轮、package.json 显示为蓝色书本图标。
三、自定义图标映射规则
File Icons 支持通过用户设置覆盖默认图标行为，例如为特定项目文件夹（如 src 或 components）分配专属图标，提升项目结构感知效率。
1、打开 VSCode 设置（Cmd + ,），切换到“JSON”编辑模式（右上角点击 `{}` 图标）。
2、在 settings.json 中添加以下字段：
"file-icons.associations": { "src": "src-folder", "components": "react" }
3、保存文件，刷新资源管理器，观察 src 文件夹是否显示为蓝色文件夹图标，components 是否呈现 React 标志。
四、禁用冲突图标主题
若已安装其他图标主题（如 Material Icon Theme），可能造成图标渲染优先级混乱，导致 File Icons 不生效或部分图标缺失。
1、进入扩展视图，搜索 Material Icon Theme 或类似名称的图标类插件。
2、对已启用的同类图标插件，点击其右侧的齿轮图标，选择 Disable。
3、重新执行“启用图标主题设置”步骤，确保仅 VS Code File Icons 处于激活状态。
五、重置图标缓存
VSCode 有时会缓存旧图标数据，尤其在更新插件或修改配置后，可能导致图标未即时更新或显示异常。
1、关闭所有 VSCode 窗口，包括后台进程（可通过活动监视器强制退出 Code Helper 进程）。
2、前往用户数据目录：~/Library/Application Support/Code/Cache（Mac）。
3、删除 Cache 文件夹内所有内容。
4、重新启动 VSCode 并检查资源管理器图标是否恢复正常渲染。
