必须先启用 material icon theme,否则所有自定义图标配置无效;需通过命令面板选择该主题、确认状态栏显示并检查 settings.json 中 "workbench.icontheme": "material-icon-theme" 配置正确。

必须先启用图标主题,否则所有自定义配置都无效。VSCode 不会自动为 JSON 文件赋予特殊图标,哪怕你写了再多映射规则,只要 workbench.iconTheme 没正确设置或主题未激活,图标就永远是默认文档样式。
确认 Material Icon Theme 已启用且生效
这是整个流程的前提,90% 的“JSON 图标没变”问题都卡在这一步:
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入并执行Preferences: File Icon Theme - 从列表中**明确选中
Material Icon Theme**(不是None,也不是Seti等内置选项) - 检查右下角状态栏是否显示
Material Icon Theme字样;若没出现,说明未生效 - 打开
settings.json,确认存在且拼写完全正确的字段:"workbench.iconTheme": "material-icon-theme"(注意 ID 是material-icon-theme,不是material-icons或带空格)
让 package.json、tsconfig.json 等文件显示 JSON 图标
Material Icon Theme 默认只对 .json 后缀启用图标,但很多项目配置文件名不叫 xxx.json,比如 package.json、tsconfig.json、jest.config.js —— 它们需要显式关联到 json 图标标识符:
- 在用户或工作区
settings.json中添加"material-icon-theme.files.associations"配置 - 键是完整文件名或通配符(如
"package.json"、"*.config.json"),值必须是该主题已定义的图标名(查其 GitHub README 的 icon list) - 常见有效值:
"json"(对应标准 JSON 图标)、"settings"(齿轮图标,适合配置类)、"tune"(调音图标,也常用于配置) - 示例配置:
"material-icon-theme.files.associations": {
"package.json": "json",
"tsconfig.json": "json",
"jest.config.js": "settings",
"*.config.json": "json"
}
避免文件名冲突导致图标被覆盖
某些文件既匹配后缀又匹配文件名时,VSCode 会按优先级取值:文件名(fileNames) > 通配符(fileExtensions) > 默认后缀映射。这意味着:
- 如果你把
"*.json"映射成"javascript"(错误示范),那所有.json文件都会变成 JS 图标,包括package.json - 更隐蔽的问题:
manifest.json在某些主题里已被预设为"manifest"图标,若你想统一用json图标,就必须在files.associations中**显式覆盖它**:"manifest.json": "json" - 工作区
.vscode/settings.json中的配置会覆盖用户级设置,调试时建议先清空工作区设置再测试
真正容易被忽略的是:图标名必须和主题内部定义的 iconDefinitions 键完全一致,大小写、连字符都不能错;查不到图标名时,直接看主题源码里的 iconDefinitions 对象,别猜。











