material icon theme 的 folders.associations 配置需写为 "material-icon-theme.folders.associations": { "backend": "server", "config": "settings" },键为精确文件夹名(区分大小写、支持空格加引号),值为该主题内置图标标识符;必须同时启用 workbench.icontheme: "material-icon-theme" 才生效。

Material Icon Theme 的 folders.associations 配置项怎么写
VSCode 本身不支持原生文件夹图标映射,必须依赖图标主题扩展(如 material-icon-theme)提供的自定义能力。folders.associations 是该扩展专用于文件夹图标的配置字段,键是文件夹名(不带路径),值是它支持的图标标识符(不是任意字符串)。
常见错误是把图标名写成 "server" 或 "backend-icon",实际必须用它文档里列出的合法标识符,比如 "server" 是对的,"backend" 就无效(除非你确认该主题已内置)。
示例配置(加在 settings.json 中):
"material-icon-theme.folders.associations": {
"backend": "server",
"back_end": "server",
"api": "cloud",
"config": "settings"
}
- 键名区分大小写,
"Backend"和"backend"是两个不同文件夹 - 不支持通配符或正则,只能写确切的文件夹名
- 如果文件夹名含空格(如
"my utils"),需用双引号包裹键名 - 该配置在用户设置或工作区
.vscode/settings.json中都生效,但工作区设置优先级更高
为什么改了 folders.associations 图标还是没变
最常被忽略的前提是:workbench.iconTheme 必须设为 "material-icon-theme",且该扩展已启用。很多用户只配了 folders.associations,却忘了主题根本没激活。
检查点:
- 打开命令面板(
Ctrl+Shift+P),执行Preferences: File Icon Theme,确认选中的是Material Icon Theme,不是None或其他主题 - 右下角状态栏应显示
Material Icon Theme字样;没显示就说明没生效 - 检查
settings.json中"workbench.iconTheme"的值是否拼写准确——必须是"material-icon-theme",不能多空格、少横线或大小写错 - 多根工作区下,某个子文件夹的
.vscode/settings.json若含"workbench.iconTheme": null,会强制禁用图标主题,且无提示
vscode-icons 的文件夹图标怎么配
vscode-icons 使用的是另一套配置字段:vsicons.associations.folders,和 material-icon-theme 不兼容,不能混用。
它的语法类似,但图标名来源不同:需查 vscode-icons 官方 README 中的 supportedFolders 列表,比如 "node_modules" 对应图标名 "folder-node","test" 对应 "folder-test"。
示例:
"vsicons.associations.folders": [
{
"icon": "folder-server",
"name": "backend"
},
{
"icon": "folder-config",
"name": "config"
}
]
- 它是数组结构,每个对象含
name(文件夹名)和icon(图标名) - 图标名必须来自其支持列表,写错就回退到默认文件夹图标
- 安装
vscode-icons后同样要手动启用主题,命令是Icons: Manage Icons→Enable vscode-icons
文件夹图标优先级和覆盖逻辑
图标最终显示取决于三重匹配顺序:项目根目录的 .vscode/settings.json → 当前工作区的 .vscode/settings.json → 用户全局 settings.json。后加载的配置会覆盖前面的同名字段。
更关键的是:如果一个文件夹同时满足多个规则(比如叫 backend,又在 node_modules 下),material-icon-theme 会按“精确匹配 > 前缀匹配 > 默认”顺序决定图标,但不会叠加。也就是说,你无法让 backend/utils 显示两个图标,只能靠父文件夹名触发一级图标。
容易被忽略的一点:某些图标主题(如 material-icon-theme)对常见文件夹名(node_modules、src、dist)有硬编码映射,你的 folders.associations 无法覆盖这些内置规则,除非主题明确允许(查其 GitHub issues 确认)。











