
需先安装vscode-icons插件,再执行Icons: Activate Icons命令启用;若图标未显示,检查workbench.iconTheme设置是否为"vscode-icons",并确保未与其他图标主题冲突。
vscode-icons 不是 VSCode 内置功能,必须通过扩展市场安装。直接在扩展面板搜索 vscode-icons,认准作者为 Roberto Huerta 的官方插件(图标为紫色方块加白色“i”),点击“安装”即可。
安装完成后需手动启用:按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)打开命令面板,输入并执行 Icons: Activate Icons。此时文件资源管理器中的图标才会生效。
Icons: Update Icons
vscode-icons,没显示说明未激活vscode-icons 依赖 VSCode 的 workbench.iconTheme 设置生效,但该设置容易被其他插件或用户配置覆盖。
打开设置(Ctrl+,),搜索 icon theme,确认右侧下拉菜单选中的是 vscode-icons,而不是默认的 vs-seti 或空值。也可以直接编辑 settings.json,确保包含这一行:
"workbench.iconTheme": "vscode-icons"
Material Icon Theme,两者会冲突,必须卸载其一.vscode/settings.json 可能覆盖全局设置,需检查该文件是否误设为 null 或其他主题
义特定文件类型的图标vscode-icons 支持通过 vsicons.associations.files 和 vsicons.associations.folders 手动映射扩展名或文件夹名到图标。
例如,想让所有 .env.local 文件显示齿轮图标,可在 settings.json 中添加:
"vsicons.associations.files": [
{
"icon": "gear",
"extensions": ["env.local"],
"format": "svg"
}
]
icon 值必须来自 vscode-icons 官方支持的图标名(如 gear、database、config),不是任意字符串"env.local",不要写 ".env.local"
Icons: Update Icons 或重启 VSCode 才生效vsicons.associations.folders,语法类似,但 icon 值需是文件夹类图标(如 src、tests)vscode-icons 默认使用 SVG 图标,但在某些系统(尤其是旧版 Windows 或高 DPI 缩放非 100% 时)可能出现锯齿、错位或加载延迟。
settings.json 中添加 "vsicons.presets.png": true
vsicons.presets.foldersAllDefaultIcon,会导致所有文件夹统一用默认图标,失去语义区分,慎开workbench.fontAliasing)会影响 SVG 图标边缘,一般无需调整真正难调的其实是项目结构复杂时的图标优先级——比如同时存在 package.json 和 pnpm-lock.yaml,哪个图标显示在前,取决于插件内部的匹配顺序,没法靠配置强行干预。