VSCode 如何配置文件排除 files.exclude 隐藏 node_modules?

文章导读
在 VSCode 中隐藏 node_modules 文件夹,需修改 settings.json 中的 files.exclude 配置项,添加 **/node_modules 模式。此操作仅影响文件资源管理器显示,不会删除实际文件,适用于希望简化项目视图的开发场景。
📋 目录
  1. 快速处理思路
  2. 为什么会这样
  3. 分步处理
  4. 怎么验证是否生效
  5. 常见坑
  6. 常见问题
  7. 参考来源
A A

在 VSCode 中隐藏 node_modules 文件夹,需修改 settings.json 中的 files.exclude 配置项,添加 **/node_modules 模式。此操作仅影响文件资源管理器显示,不会删除实际文件,适用于希望简化项目视图的开发场景。

先说结论:配置 files.exclude 是隐藏 node_modules 的标准做法,不影响项目运行。

  • 适合:希望清理文件资源管理器视图,减少干扰的开发者
  • 先准备:打开 VSCode 设置 JSON 文件,确认当前工作区权限
  • 验收:文件资源管理器中不再显示 node_modules 文件夹

快速处理思路

直接编辑用户或工作区设置文件,加入排除规则。

{
  "files.exclude": {
    "**/node_modules": true
  }
}

为什么会这样

files.exclude 控制文件资源管理器的可见性,不删除磁盘文件。

VSCode 设计该配置是为了让用户自定义界面显示,node_modules 通常包含大量依赖文件,默认隐藏可提升浏览体验。修改此配置仅改变编辑器 UI 表现,不会触碰磁盘数据,因此没有数据丢失风险。

分步处理

按以下步骤修改配置文件,确保规则生效。

VSCode 如何配置文件排除 files.exclude 隐藏 node_modules?
  1. 打开命令面板:按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)。
  2. 进入设置 JSON:输入 Preferences: Open Settings (JSON) 并选择。
  3. 添加配置:在 JSON 对象中加入 files.exclude 字段,若已存在则追加节点。
  4. 保存文件:按下 Ctrl+S 或 Cmd+S 保存 settings.json。

怎么验证是否生效

观察左侧文件资源管理器,确认 node_modules 文件夹消失。

打开项目根目录,查看侧边栏文件列表。若 node_modules 不再显示,且其他文件夹正常可见,则配置生效。若需临时查看,可暂时关闭该规则或启用显示隐藏文件选项。

常见坑

  • search.exclude 混淆:files.exclude 仅隐藏文件树,搜索文件时仍可能被搜到,需同时配置 search.exclude 才能完全屏蔽。
  • 工作区覆盖:工作区设置会覆盖用户设置,若无效请检查 .vscode/settings.json 是否有冲突配置。
  • 路径模式错误:必须使用 glob 模式如 **/node_modules,仅写 node_modules 可能无法匹配子目录。

常见问题

隐藏 node_modules 会删除文件吗?

不会删除文件。files.exclude 仅控制 VSCode 界面显示,磁盘上的文件保持原状,项目运行不受影响。

如何恢复显示 node_modules?

将 settings.json 中 **/node_modules 的值改为 false,或删除该配置项并保存即可恢复显示。

为什么配置后搜索还能搜到?

因为搜索由 search.exclude 控制。若需搜索也排除,需在 settings.json 中同样配置 search.exclude 项。

参考来源

  • Visual Studio Code Documentation, "Settings", https://code.visualstudio.com/docs/getstarted/settings