VS Code 资源管理器隐藏 node_modules 并保留 @types 目录的配置方法

VS Code 资源管理器想隐藏 node_modules，但仍查看类型声明时，使用工作区 settings.json 里的 files.exclude，再用 ! 给 node_modules/@types 加例外即可。这个设置只改变 VS Code 的显示范围，不会删除磁盘上的文件。

官方文档：https://code.visualstudio.com/docs/configure/settings

先打开工作区 settings.json

先在 VS Code 打开项目文件夹，再按 Command Palette（Windows/Linux 可按 Ctrl+Shift+P，macOS 可按 ⇧⌘P），执行 Preferences: Open Workspace Settings (JSON)。确认文件位于项目的 .vscode/settings.json，不要误改 User Settings，否则规则会影响所有项目。

用 files.exclude 隐藏父目录

在严格 JSON 中不能写注释，下面的两组配置可以按项目结构二选一。根目录只有一个依赖目录时，用第一组最直观；多包仓库需要匹配每个子项目时，用第二组的 glob。

{
  "files.exclude": {
    "node_modules": true,
    "!node_modules/@types": true
  }
}

如果仓库中存在多个 node_modules，可改成 "**/node_modules": true 和 "!**/node_modules/@types": true。这里的 true 表示在 Explorer 中隐藏匹配项；它不是删除、移动或修改 Git 索引。

用嵌套例外保留 @types

保存文件后回到 Explorer。正确结果通常是：普通 node_modules 内容不再展开，但 @types 仍能看到；点击它可以继续查看声明文件。父目录规则与子目录例外要成对出现，不能只写例外而没有父规则。

可以用下面的清单核对状态：

• 右下角或编辑器标签没有 JSON 语法错误。
• 打开的是项目级 Workspace Settings，而不是 User Settings。
• 规则键名是 files.exclude，没有误写成 file.exclude。
• !node_modules/@types 的路径和实际目录层级一致。

看不到 @types 时按范围排查

第一步看路径：根项目和多根工作区的相对路径不同，必要时分别在对应根目录的设置中配置。第二步看大小写：glob 的大小写行为会随操作系统变化，Linux 上尤其要保持目录名精确。第三步看设置来源：工作区设置会覆盖同名的用户设置，但对象型设置可能合并，因此要在 Settings editor 的 Workspace 标签确认最终值。

还要区分 files.exclude 与 search.exclude：前者主要控制 Explorer 的可见性，后者控制搜索结果。若目标只是减少目录树噪声，不要把搜索排除也一并打开，否则排查类型声明时会误以为文件不存在。

常见问题

隐藏 node_modules 会删除依赖吗？

不会。它只是改变 VS Code 的界面显示；Node、构建工具和磁盘文件仍按原路径存在。

为什么写了感叹号仍然看不到 @types？

先检查父规则和例外规则的路径是否同层级，再确认 JSON 已保存且当前窗口打开的是目标工作区。

多根工作区应该把规则写在哪里？

需要按每个根目录的需求放入对应项目设置；若所有根目录都要相同规则，再考虑用户级设置，并确认不会影响其他项目。

想隐藏 Explorer 但保留搜索怎么办？

只配置 files.exclude，不要同时配置 search.exclude；两者职责不同。

这套配置的关键不是把依赖目录“清掉”，而是用父规则降低 Explorer 噪声，再用一个精确的嵌套例外保留仍需阅读的类型声明。保存后先看树形结果，再决定是否调整 glob 范围。