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"]。
三、为特定文件类型自定义嵌套关系
当默认规则不满足项目需求时，可为单一文件扩展名单独指定其子文件匹配模式，实现更精细的视图组织。
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、确保该文件已提交至版本控制，以便其他协作者拉取后自动生效。
