要让 foo.config.js 显示齿轮图标，需安装 vscode-icons 等支持自定义图标的主题，并在 settings.json 中通过 vsicons.associations.files（vscode-icons）或 material-icon-theme.files.associations（material-icon-theme）精确配置 "foo.config.js": "gear"，注意图标 ID 大小写敏感且不支持通配符。
怎么让 foo.config.js 显示成齿轮图标
VSCode 不会自动根据文件名匹配图标，得靠 file-icons 类扩展或原生 workbench.iconTheme 配置手动映射。默认主题（如 vs-seti）只覆盖常见后缀（.js、.json），对 foo.config.js 这种带语义前缀的文件完全没反应。
实操建议：
- 装一个支持自定义图标的主题，比如
vscode-icons（推荐）或material-icon-theme - 在
settings.json里用material-icon-theme.files.associations或vsicons.associations.files手动绑定 - 键名必须是完整文件名（含扩展名），不能用通配符或正则；例如：
"foo.config.js": "gear" - 图标 ID 必须是该主题实际支持的值（查主题文档或源码里的
iconDefinitions）
files.associations 和 material-icon-theme.files.associations 有啥区别
前者是 VSCode 原生命令，只影响语法高亮和语言模式（比如把 .env 当成 shellscript）；后者才是控制图标的配置项，属于第三方主题的专属设置，两者完全不互通。
容易踩的坑：
- 误把图标配置写进
files.associations，结果图标没变，连带语言识别也乱了 - 用了
vscode-icons却去配material-icon-theme的字段，配置直接被忽略 - 图标 ID 写错大小写（比如
"Gear"vs"gear"），VSCode 不报错但不生效
为什么改了配置，bar.test.ts 还是显示 TypeScript 默认图标
因为图标主题加载顺序和缓存机制：VSCode 启动时读一次配置，改完不重启或不重载窗口，新规则不会生效；而且部分主题（如 vscode-icons）还要求你主动点击命令面板运行 Reload Window 或 Apply Icons To Project。
检查步骤：
- 确认当前启用的主题确实是你要配的那个（
workbench.iconTheme值是否正确） - 打开命令面板，搜
Developer: Toggle Developer Tools，看 Console 有没有图标主题加载失败的警告 - 删掉
node_modules和.vscode下可能残留的旧缓存（尤其团队项目里别人提交过settings.json覆盖）
能用通配符匹配 *.config.* 这类文件吗
不能。VSCode 原生和主流图标主题都不支持 glob 或正则匹配文件名，只接受精确字符串键名。想覆盖一批类似文件，只能逐个列出来，或者换思路：
- 把文件统一重命名为标准后缀，比如
webpack.config.js→webpack.config.mjs，再靠.mjs关联图标 - 用
material-icon-theme.folders.associations把整个config/目录设为齿轮图标（仅限目录级） - 放弃图标定制，改用文件名颜色标记（通过
todo-tree或自定义editor.tokenColorCustomizations）
最麻烦但最稳的方式，还是老老实实列全要配的文件名——图标映射本来就是静态声明式逻辑，没有运行时判断这回事。
