VSCode中需安装vscode-icons扩展，并在settings.json中配置"vsicons.associations.files"映射".env"为gear图标，extensions写["env"]而非[".env"]，icon名须为扩展支持的合法值。
VSCode 怎么让 .env 文件显示齿轮图标
VSCode 本身不内置 .env 图标，得靠扩展 + 手动映射。核心是装 vscode-icons（最常用），再在设置里告诉它“把 .env 当成 configuration 类型来渲染”。否则即使装了图标包，.env 还是默认文档图标。
实操步骤：
- 安装扩展：
vscode-icons（作者：Roberto Huerta） - 打开设置（
Ctrl+,或Cmd+,），搜icons，点开File Icon Theme→ 选VS Code Icons - 按
Ctrl+Shift+P（或Cmd+Shift+P），输入Preferences: Open Settings (JSON)，打开settings.json - 添加这段映射：
"vsicons.associations.files": [
{
"icon": "gear",
"extensions": ["env"],
"format": "svg"
}
]
注意：extensions 里写的是 ["env"]，不是 [".env"] —— 多写个点就失效；icon 名必须是 vscode-icons 支持的，查官网或插件 README 最稳（比如 config、settings、gear 都行，但 dotenv 不行）。
为什么 .tsconfig.json 显示不了 TypeScript 图标
因为 VSCode 默认把 .tsconfig.json 归为 json 类型，而 vscode-icons 的 JSON 图标是通用的，不会自动识别它是 TS 配置。得手动把它“重分类”为 typescript 或 typescript-config 类型。
常见错误现象：改了文件名（比如改成 tsconfig.dev.json）后图标突然变回普通 JSON，就是因为没同步更新映射规则。
解决办法（加到 settings.json）：
- 用
files.associations先让 VSCode 把它当 TypeScript 配置文件解析：
"files.associations": {
"*.tsconfig.json": "typescript"
}
- 再用
vsicons.associations.files绑定图标（推荐用typescript-config，比typescript更准确）：
"vsicons.associations.files": [
{
"icon": "typescript-config",
"extensions": ["tsconfig.json"],
"format": "svg"
}
]
关键点：两个配置要配齐，缺一不可；extensions 是精确匹配，tsconfig.json 不能写成 *.tsconfig.json，后者只对 files.associations 有效。
自定义图标对性能有影响吗
几乎没有。图标只是前端渲染层的 CSS class + SVG，不触发文件读取或语言服务。但有两个真实影响点容易被忽略：
- 如果在
vsicons.associations.files里写了几十上百条映射，每次文件树刷新时 VSCode 要做字符串比对，极端情况下（比如 500+ 条）会轻微拖慢资源管理器响应 —— 建议只映射真正需要区分的文件（比如.huskyrc、Dockerfile.prod） - 某些图标主题（如
Material Icon Theme）支持folders.associations，但 VSCode 对文件夹图标的匹配逻辑更弱，常出现“子文件夹没生效”，这不是性能问题，是匹配优先级导致的
验证方式：打开命令面板 → Developer: Toggle Developer Tools → 切到 Console，展开任意文件节点，看 class 名是否含 icon-xxx —— 有就是生效了，没就是映射写错了或没重启窗口。
Node.js 项目里 .nvmrc 和 .node-version 怎么区分图标
这两个文件语义不同：.nvmrc 是 nvm 专用，.node-version 是 nodenv / asdf 等工具用的，但 VSCode 默认都当普通文本。想区分图标，就得分别映射，且确保扩展支持对应 icon 名。
实操建议：
- 确认你用的图标扩展支持
nvm和node-version图标（vscode-iconsv14+ 支持，旧版只支持node） - 在
settings.json中分别绑定：
"vsicons.associations.files": [
{
"icon": "nvm",
"extensions": ["nvmrc"],
"format": "svg"
},
{
"icon": "node-version",
"extensions": ["node-version"],
"format": "svg"
}
]
坑点：nvmrc 没有点，node-version 也没点 —— 这是扩展约定的命名，和文件扩展名无关；另外，如果你同时用了 files.associations 把它们设为 plaintext，图标反而会失效，因为类型覆盖了图标映射。
复杂点在于：不同团队用的版本管理工具不同，有人只认 .nvmrc，有人只读 .node-version，图标只是辅助识别，别指望它能替代工具兼容性检查。
