Windows资源管理器中Visual Studio Code关联文件全显示默认图标如何解决

方法一：使用现成图标主题（新手首选） #

• 打开VS Code左侧扩展面板，搜索安装 Material Icon Theme 或 vscode-icons 两款主流图标扩展
• 安装完成后按下快捷键 Ctrl+,（Windows/Linux系统）/ Cmd+,（Mac系统）打开设置页，搜索「文件图标主题」，在下拉选项中选择刚安装的图标主题即可，扩展会自动匹配绝大多数常见文件后缀的对应图标

方法二：手动自定义后缀与图标绑定 #

如果有特殊定制需求，可以手动修改配置指定对应关系：

• 按下快捷键 Ctrl+,/Cmd+, 打开设置页，点击页面右上角的{}图标（打开设置(JSON)）进入配置编辑页
• 参考以下模板添加配置，按需修改后缀和对应图标名即可：

{
  // 使用Material Icon Theme时的配置项
  "material-icon-theme.files.associations": {
    "*.ts": "typescript",
    "*.jsx": "react",
    "*.config.js": "settings",
    // 可自行添加其他后缀的映射规则
  },
  // 使用vscode-icons时的配置项
  "vsicons.associations.files": [
    {
      "icon": "yaml",
      "extensions": ["yml", "yaml.dev", "yaml.prod"],
      "format": "svg"
    }
  ]
}

• 保存配置后立即生效，对应后缀的文件会显示你指定的图标

补充说明：如果配置后仍不生效，可检查当前工作区的settings.json是否存在覆盖全局配置的冲突项，删除冲突规则即可。

内容的提问来源于stack exchange，提问作者noenic