vscode 文件图标需手动激活主题、正确配置 workbench.icontheme 值、防止工作区覆盖三步并行;执行 preferences: file icon theme 命令选择主题,settings.json 中值须与扩展 identifier 完全一致,多根工作区下子文件夹 .vscode/settings.json 若含 null 值将静默退回到默认图标。

VSCode 默认不显示任何文件图标,装完插件也不代表图标就出来了——必须手动激活主题、写对配置项、防住工作区覆盖,三步缺一不可。
Preferences: File Icon Theme 命令必须手动执行
很多人装完 Material Icon Theme 或 vscode-icons 后资源管理器还是文档图标,不是插件坏了,是 VSCode 从不自动启用主题。它只下载资源,不写配置、不激活。
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入并执行Preferences: File Icon Theme - 在弹出列表中选
Material Icon Theme或vscode-icons,别选None - 右下角状态栏应立刻显示对应主题名;没出现说明没生效
- 如果命令面板里根本没这个选项,去扩展面板确认:是否已安装、是否已启用、ID 是否拼错(
material-icon-theme≠MaterialIconTheme)
settings.json 里 workbench.iconTheme 必须写对位置和值
这个字段只在用户级设置或工作区 .vscode/settings.json 中有效,且值必须和扩展页面右上角的 Identifier 完全一致。
- 打开
settings.json(快捷键Ctrl+,→ 右上角花括号图标),添加:"workbench.iconTheme": "material-icon-theme"(vscode-icons对应值为"vscode-icons") - 不能带空格、大小写错误或多余字符:
"material-icon-theme "❌,"material-icon"❌ - 多根工作区下,某个子文件夹的
.vscode/settings.json若含"workbench.iconTheme": null,该目录图标会强制退回到默认样式,且界面无提示 - 改完保存后通常立即生效;若无效,优先执行
Developer: Reload Window,比重启快得多
files.associations 映射自定义文件名要严格按规则写
像 .env.local、vite.config.ts 这类文件,默认不会被图标主题识别,得靠 material-icon-theme.files.associations 或 vsicons.associations 手动映射——但键和值都有硬性约束。
- 键必须是完整文件名或通配符,且带点:
".env.local"✅,"env.local"❌;"*.env"✅,"*.test.js"❌(VSCode 不支持这种 glob) - 值必须是该主题实际支持的图标 ID,不是文件类型也不是随便起的名字:
"lock"✅(对应锁图标),"lock.svg"❌;查 ID 列表请翻插件源码里的iconDefinitions.json或 GitHub README - Material Icon Theme 示例:
"vite.config.ts": "typescript"、".prettierrc.*": "settings" -
vscode-icons 示例:
"Dockerfile": "docker"、"*.log": "log"
工作区设置会静默覆盖全局配置
这是最常被忽略的“图标突然失效”原因:你明明在用户设置里配好了,但打开某个项目后图标又变回默认了——大概率是该项目根目录下有 .vscode/settings.json,里面写了 "workbench.iconTheme": "none" 或别的值。
- 右下角状态栏若显示
Workspace Settings,说明当前处于工作区设置模式,用户级配置已被屏蔽 - 检查
.vscode/settings.json是否存在、是否含workbench.iconTheme字段 - 哪怕只有一行
"workbench.iconTheme": null,也会导致图标退化,且 VSCode 不给任何警告 - Peacock、Theme Switcher 等插件也可能动态覆盖该字段,临时禁用它们可快速验证是否冲突











