在 macos 上为 vs code 配置文件图标主题需安装插件并手动启用:1. 安装 material icon theme 或 vscode-icons;2. 通过命令面板启用并重载窗口;3. 可添加自定义后缀映射及微调视觉效果。
在 macos 上给 vs code 配置文件图标主题,核心就两步:装对插件 + 手动启用。vscode 不会自动激活图标主题,哪怕 settings.json 写得再准,不执行启用操作,图标照样不显示。
选一个靠谱的图标主题
目前最成熟、覆盖最广的是两个:
-
Material Icon Theme:风格统一、支持精细映射(比如给
.env.local显示齿轮图标),适合需要区分多段后缀的项目; - vscode-icons:图标更紧凑、加载稳定,小屏或文件密集型项目看着更清爽。
其他主题要么语言支持少,要么适配差、加载慢,不建议折腾。
安装并手动启用(关键!)
以 Material Icon Theme 为例:
- 打开扩展面板(Cmd+Shift+X),搜
Material Icon Theme,安装; - 按 Cmd+Shift+P 打开命令面板,输入
Preferences: File Icon Theme,回车; - 从列表里选中
Material Icon Theme; - 右下角弹出提示时,点 Reload Window —— 这步不能跳过,否则配置不生效。
vscode-icons 同理,只是启用命令叫 Icons: Activate Icons,它会自动写入配置并重载。
让特殊文件也显示对应图标
像 .env.production、.prettierrc.cjs 这类多段后缀,默认只认最后一段(cjs 或 production),图标还是普通文件样式。解决方法是加自定义映射:
- 打开
Preferences: Open Settings (JSON)(Cmd+, → 右上角花括号图标); - 在大括号内添加:
"*.env.*": "gear",
".prettierrc.*": "settings"
}
注意:*.env.* 是 glob 模式,星号只能匹配一级(.env.dev.local 不会被 .env.* 覆盖);通配符必须以点开头,*.test.js 无效,要写成 .test.js。
微调视觉效果(可选)
启用后可在设置里搜 “material icon” 或 “vscode-icons”,开启这些实用选项:
- 文件夹前加展开箭头(
Show Folder Arrows); - 调整图标饱和度或透明度,适配深色主题;
- vscode-icons 可执行
Icons: Enable All激活更多图标类型,不影响启动速度。











