VSCode图标主题需手动配置并重载窗口才生效，安装插件仅下载资源不自动启用；自定义文件图标须通过主题专属字段映射；工作区设置会覆盖用户级配置；远程开发需在远程端安装插件；避免CSS注入，应使用主题原生配置项。

workbench.iconTheme 必须手动写进 settings.json 并重载窗口，否则装了图标扩展也白装。

为什么装了插件图标还是默认文档样式？

VSCode 不会自动启用任何图标主题——安装只下载资源，不写配置、不激活。常见错误现象包括：

• 右下角状态栏没显示主题名（如 Material Icon Theme 或 vscode-icons）
• 命令面板里搜 Preferences: File Icon Theme，列表中没有你装的选项
• settings.json 里写了 "workbench.iconTheme": "material-icon-theme"，但图标没变

解决办法只有三步：

• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入并执行 Preferences: File Icon Theme
• 从列表中选你要的主题（不能选 None，也不能拼错 ID）
• 点右下角弹出的 Reload Window —— 不重载，配置不生效

怎么让 .env.local、vite.config.ts 这类文件显示自定义图标？

这类文件不属于默认支持范围，必须靠 files.associations 或插件专属字段映射。不同图标主题用的字段名不一样：

• Material Icon Theme 用 "material-icon-theme.files.associations"，键是完整文件名或 glob（如 ".env.*"），值是图标 ID（如 "gear"、"lock"）
• vscode-icons 用 "vsicons.associations.files"，extensions 数组里写的是后缀名去掉点的部分（如 ["env"]，不是 [".env"]）

示例（Material Icon Theme）：

"material-icon-theme.files.associations": {
  ".env.*": "gear",
  "vite.config.ts": "typescript",
  ".prettierrc.*": "settings"
}

注意：.env.* 只匹配一级（.env.dev ✅，.env.dev.local ❌），多段需单独列。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

工作区设置会悄悄覆盖用户级图标配置

只要项目根目录有 .vscode/settings.json，它就会优先于用户设置。如果里面写了 "workbench.iconTheme": null 或漏了配置，图标就退回到默认样式，且界面不提示。

检查方法：

• 看右下角状态栏是否显示 Workspace Settings
• 打开 .vscode/settings.json，确认里面有且仅有一条有效的 workbench.iconTheme 配置
• 远程开发（SSH/Containers）时，插件需在远程端安装，本地装了没用

图标颜色发灰、边缘模糊？别碰 CSS 注入

有人用 user.css 强行调 opacity 或 filter，结果在高缩放屏（如 4K + 150%）、暗色主题下图标变糊、错位、甚至被其他插件干扰。

Material Icon Theme 提供原生控制项：

• "material-icon-theme.folders.color": "#6c5ce7" —— 手动设文件夹颜色，避免和侧边栏背景融成一片
• "material-icon-theme.hideFoldersArrows": true —— 关掉小箭头，视觉更干净
• "material-icon-theme.showUpdateMessage": false —— 禁用每次启动弹更新提示

所有这些都比改 CSS 安全、稳定、可维护。