在 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 表现,不会触碰磁盘数据,因此没有数据丢失风险。
分步处理
按以下步骤修改配置文件,确保规则生效。
- 打开命令面板:按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)。
- 进入设置 JSON:输入 Preferences: Open Settings (JSON) 并选择。
- 添加配置:在 JSON 对象中加入 files.exclude 字段,若已存在则追加节点。
- 保存文件:按下 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