必须先配置"workbench.iconTheme": "vscode-icons"启用主题,否则vsicons.associations.files映射无效;extensions数组需填无点扩展名如["env"],图标名须与vscode-icons实际支持的名称一致。

vscode-icons 的 vsicons.associations.files 必须配对生效
装了 vscode-icons 却没图标,大概率是只改了图标映射,但没启用主题本身。VSCode 默认不显示任何自定义图标,必须先设置 "workbench.iconTheme": "vscode-icons",否则 vsicons.associations.files 完全不会触发。
常见错误现象:settings.json 里写了图标映射,但 .env 或 .astro 文件还是文档图标——先检查 workbench.iconTheme 是否存在且值为 "vscode-icons",再确认扩展已安装并启用(不是“已安装”,是“已启用”)。
- 扩展面板中该插件状态栏显示「启用」而非「已安装」
-
workbench.iconTheme字段不能被工作区设置(.vscode/settings.json)覆盖 - 修改后无需重启 VSCode,但若资源管理器未刷新,可执行
Developer: Reload Window
extensions 字段写 ["env"],不是 [".env"]
这是最常踩的坑:vsicons.associations.files 的 extensions 数组里填的是扩展名「去掉点」的纯字符串,不是文件名模式。写成 [".env"] 或 ["*.env"] 都无效。
正确写法示例:
"vsicons.associations.files": [
{
"icon": "gear",
"extensions": ["env"],
"format": "svg"
}
]
-
icon值必须是vscode-icons实际支持的图标名,比如gear、config、typescript-config,不能写dotenv或settings(后者不合法) - 查可用图标名最稳的方式:打开插件 GitHub 主页 → 查
iconDefinitions列表,或看 README 中 “Available Icons” 章节 - 多个扩展名可共用一个图标,例如
["env", "local", "production"]
files.associations 和图标映射要分两步配
有些文件(如 tsconfig.dev.json)即使加了图标映射也不显示,是因为 VSCode 先按语言类型归类,再决定用哪个图标。如果它被识别为 json 类型,vscode-icons 就会走 JSON 图标逻辑,绕过你写的 tsconfig.json 映射。
解决办法是双配置联动:
- 用
files.associations把文件强制归为对应语言类型:"*.tsconfig.json": "typescript" - 再用
vsicons.associations.files绑定图标,且extensions写精确匹配的["tsconfig.json"],不能写通配符 - 注意:前者支持通配符,后者只认字面量扩展名;两个配置缺一不可
Material Icon Theme 的字段名和值都更严格
如果你换用 Material Icon Theme,它的配置字段名完全不同,拼错就静默失效。比如文件夹图标必须用 material-icon-theme.folders.associations,写成 folders.associations 或 vsicons.associations.folders 都不生效。
而且它的图标名也不同:tune 对应齿轮,docker 对应鲸鱼,astro 对应星球——这些名字必须和它内置的 iconDefinitions 完全一致,大小写都不能错。
- 文件映射字段是
material-icon-theme.files.associations(对象格式,不是数组) - 值是键值对:
"*.env": "tune",不是数组套对象 - 图标名不通用,
vscode-icons的gear在这里得写成tune
跨主题迁移时,字段结构、语法、图标名三者全得重查,不能直接复制粘贴。


















