VS Code 文件图标主题可提升目录可读性,安装后需手动启用:通过命令面板选择“Preferences: File Icon Theme”,再按需自定义文件图标映射并搭配文件夹主题使用。

VS Code 的文件图标主题能显著提升项目目录的可读性——不同文件类型用不同图标,一眼识别配置、源码、资源或脚本,不用点开看后缀。
怎么安装图标主题?
打开 VS Code,点击左侧活动栏的扩展图标(或按 Ctrl+Shift+X),搜索关键词 “file icon theme”,推荐安装 vscode-icons 或 Material Icon Theme。安装后重启窗口(或按 Ctrl+Shift+P 输入 “Developer: Reload Window”)即可生效。
启用图标主题的正确方式
安装只是第一步,必须手动启用才能显示图标:
- 按 Ctrl+Shift+P 打开命令面板
- 输入 “Preferences: File Icon Theme”
- 回车后选择已安装的主题(如 “Material Icon Theme”)
如果没看到图标,请确认没有禁用图标(设置中检查 “Workbench > Appearance > Show Activity Bar” 和 “File Explorer > Compact Folders” 不影响图标显示)。
自定义图标映射(进阶但实用)
某些项目有自定义文件(如 .env.local、next.config.js),默认可能没专属图标。可通过工作区设置手动关联:
- 在项目根目录创建 .vscode/settings.json
- 添加如下配置,为特定文件名指定图标:
支持的图标类型包括 config、javascript、typescript、json 等,具体可查所选主题文档。
小技巧:图标 + 文件夹主题更配
图标主题常和文件夹主题搭配使用效果更佳。比如 Material Icon Theme 推荐搭配 Material Theme 的文件夹样式;vscode-icons 自带文件夹颜色方案。在扩展市场搜 “folder theme” 可一键增强视觉层次。
基本上就这些——装一个、启一个、微调一两个关键文件,整个侧边栏立刻变清晰。不复杂但容易忽略。










