VSCode的“File Nesting”：整理你的项目文件视图

VSCode 文件嵌套功能可解决目录混乱问题：一、启用 Explorer: File Nesting Enabled；二、在 settings.json 配置 patterns；三、自定义扩展名嵌套关系；四、设空数组禁用特定嵌套；五、用工作区设置统一团队规则。

如果您在 VSCode 中看到大量相关文件（如 HTML、CSS、JavaScript）平铺在同一目录下，导致项目结构混乱，则可能是由于文件嵌套功能未启用或配置不当。以下是启用和配置“File Nesting”功能的具体步骤：

本文运行环境：MacBook Pro，macOS Sequoia。

一、启用 File Nesting 功能

VSCode 自 1.86 版本起原生支持 File Nesting，该功能通过识别文件名模式将子文件逻辑折叠到主文件下方，从而减少视觉干扰并提升导航效率。

1、打开 VSCode 的设置界面，可通过菜单栏选择 Code → Settings，或使用快捷键 Cmd + ,。

2、在设置搜索框中输入 file nesting。

3、勾选 Explorer: File Nesting Enabled 选项。

二、配置默认嵌套规则

VSCode 提供预设的常见框架嵌套规则（如 React 的 .jsx/.css、Vue 的 .vue/.ts），这些规则定义了哪些扩展名应被自动归入主文件之下。

1、在设置中继续搜索 file nesting patterns。

2、点击 Edit in settings.json 链接，进入 JSON 配置编辑模式。

3、在 settings.json 中添加或修改 "explorer.fileNesting.patterns" 字段，例如：
"*.js": ["*.d.ts", "*.test.js", "*.spec.js"]。

三、为特定文件类型自定义嵌套关系

当默认规则不满足项目需求时，可为单一文件扩展名单独指定其子文件匹配模式，实现更精细的视图组织。

网钛淘拍CMS(TaoPaiCMS) V1.60

2013年07月06日 V1.60 升级包更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示，后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品，增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称，“分类”改

0

查看详情

1、在 settings.json 中定位到 "explorer.fileNesting.patterns" 对象内部。

2、添加新键值对，键为父文件扩展名（含星号前缀），值为字符串数组，例如：
"*.component.html": ["*.component.ts", "*.component.scss", "*.component.spec.ts"]。

3、保存文件后，重启资源管理器或重新加载窗口（Cmd + Shift + P → Developer: Reload Window）。

四、禁用某类嵌套以保留独立显示

某些场景下需临时取消嵌套（如调试时需快速访问被折叠的配置文件），可通过覆盖规则实现局部禁用。

1、在 settings.json 中为对应扩展名设置空数组，例如：
"*.json": []。

2、该配置将阻止所有 .json 文件被任何其他文件嵌套，同时也不作为父文件收纳其他文件。

五、基于工作区覆盖全局嵌套设置

团队项目中可能需统一文件视图逻辑，此时应将嵌套规则写入工作区设置，避免影响用户全局偏好。

1、在项目根目录打开命令面板（Cmd + Shift + P），执行 Preferences: Open Workspace Settings (JSON)。

2、在打开的 .vscode/settings.json 中插入 "explorer.fileNesting.patterns" 配置块。

3、确保该文件已提交至版本控制，以便其他协作者拉取后自动生效。

以上就是VSCode的“File Nesting”：整理你的项目文件视图的详细内容，更多请关注php中文网其它相关文章！