vscode图标需先安装扩展(如vscode-icons或material-icon-theme),再手动执行preferences: file icon theme启用并重载窗口;多段后缀(如.env.local)须在settings.json中用对应扩展专属字段(vsicons.associations.files或material-icon-theme.files.associations)精确映射,且extensions不加点、glob仅匹配一级。

VSCode 本身不决定文件类型对应什么图标,全靠图标主题扩展(如 vscode-icons 或 material-icon-theme)内置规则 + 你手动补充的映射来生效。装了扩展不等于图标就自动精准匹配——很多自定义后缀(比如 .env.local、tsconfig.dev.json)默认根本没图标,必须自己配。
怎么确认当前图标主题是否生效
图标没变,90% 是主题压根没启用,不是配置写错了。
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入Preferences: File Icon Theme,回车后从列表里选中已安装的主题(例如vscode-icons) - 选完必须点右下角弹出的 Reload Window(重载窗口),否则设置只是“存在”,不会渲染
- 检查
settings.json是否被工作区设置覆盖:打开命令面板 →Preferences: Open Settings (JSON),确认"workbench.iconTheme"值正确且没被注释掉 - 重启 VSCode 后仍无效?可能是其他扩展冲突,可先禁用非必要扩展再试
如何让 .env、.prettierrc.* 这类文件显示齿轮/设置图标
这类多段后缀(带多个点)的文件,图标主题默认只认最后一段(如 cjs、json),前面的修饰部分被忽略。必须手动映射,且写法有严格限制。
- 对
vscode-icons:在settings.json中加"vsicons.associations.files",extensions字段填不含点的后缀名,例如:["env"](不是[".env"]),icon值必须是它支持的合法名(查插件 README,gear可用,dotenv不行) - 对
material-icon-theme:用"material-icon-theme.files.associations",支持 glob 模式,例如:".env.*": "gear",但注意*只匹配一级(.env.dev.local不会被.env.*覆盖) - 别混用两种配置——
vsicons.associations.files和material-icon-theme.files.associations是不同扩展的专属字段,写错位置完全无效
为什么 tsconfig.json 显示不了 TypeScript 图标
因为 VSCode 默认把它当 json 类型解析,而图标主题的 JSON 图标是通用的,不会自动识别它是 TS 配置。得两步走:先让编辑器“认出”它是 TS 配置,再让它“画成” TS 图标。
- 第一步:用
"files.associations"告诉 VSCode 把tsconfig.json当作typescript或typescript-config类型处理(推荐后者,更精准) - 第二步:用对应图标的
associations字段绑定图标,例如"vsicons.associations.files"里加{"icon":"typescript-config","extensions":["tsconfig.json"],"format":"svg"} - 两个配置缺一不可;
extensions是精确匹配,不能写成["*.tsconfig.json"]—— 那种写法只对files.associations有效
最常被忽略的是:改了文件名(比如把 tsconfig.json 改成 tsconfig.dev.json)后,图标变回默认,就是因为没同步更新 extensions 列表或 files.associations 的 glob 规则。每个文件名变体都得单独列出来,或者用主题支持的通配模式兜底。











