VSCode隐藏前端项目生成文件的实用技巧-VSCode-PHP中文网

必须用files.exclude配置在项目级.vscode/settings.json中，如{"files.exclude":{"/dist":true,"/build":true,"**/.next":true}}，才能彻底隐藏前端构建产物；search.exclude仅影响搜索范围，对资源管理器无效。

vscode隐藏前端项目生成文件的实用技巧

想让 dist、build、.next 这类前端构建产物彻底从资源管理器消失？必须用 files.exclude，且必须写在项目级 .vscode/settings.json 里——配错位置或用错配置项，文件照常显示。

为什么 `search.exclude` 不能隐藏资源管理器里的文件

search.exclude 只影响 Ctrl+Shift+F 的搜索范围，对左侧文件树毫无作用。常见错误是：在设置界面搜 “exclude”，点了 search.exclude 的开关，结果发现 dist 还在侧边栏里一动不动。

files.exclude 控制资源管理器是否渲染某路径
search.exclude 控制搜索时是否扫描某路径
两者语法一致（都用 glob），但作用域完全分离
想“看不见”，只配 search.exclude 是白忙活

正确配置 `files.exclude` 的路径写法

VSCode 的 glob 匹配严格依赖前缀 **/，漏掉就失效。例如：

"**/dist" → ✅ 匹配所有层级的 dist 目录（根目录、packages/foo/dist、src/dist 都中）
"dist" → ❌ 只匹配根目录下叫 dist 的文件/文件夹，几乎没用
"dist/**" → ❌ 非标准 glob 开头，VSCode 不识别
"**/.next" → ✅ Next.js 项目必备，隐藏服务端渲染产物
"**/node_modules" → ⚠️ 谨慎：虽然能隐藏，但可能干扰部分插件（如 ESLint、TypeScript）的路径解析

推荐最小化排除：优先加 "**/dist"、"**/build"、"**/.next"、"**/coverage"，别一股脑全塞。

工作区设置 vs 用户设置：为什么必须放 `.vscode/settings.json`

用户级设置（全局）会影响你打开的所有项目，但前端项目千差万别：dist 在 Vue 项目里要隐藏，在某个微前端子包里可能需要临时查看。工作区设置才是正解：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

确保项目根目录存在 .vscode 文件夹
新建或编辑 .vscode/settings.json，内容必须是完整 JSON 对象，不能只写一个字段
示例结构：

{
  "files.exclude": {
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  }
}

保存后资源管理器立刻刷新，无需重启 VSCode。如果没反应，检查 JSON 格式是否合法（逗号、引号、括号），VSCode 底部状态栏会报错。

临时查看被隐藏的文件：不用改配置

配完 files.exclude 后，某天突然想进 dist 看一眼打包产物？别急着删配置。装个扩展 karlolukic/toggle-excluded-files，它会在状态栏加个按钮，点一下就能临时显示所有被 files.exclude 拦住的文件，再点一下恢复隐藏。状态跨 VSCode 重启保留，也不改动任何配置文件。

这个细节容易被忽略：files.exclude 是静态过滤，而真实开发中“偶尔需要看”比“永远不看”更常见。硬编码式排除 + 手动改配置，反而拖慢调试节奏。