VSCode的File Nesting功能可嵌套关联文件以简化导航。需在settings.json中启用files.nested、配置explorer.fileNesting.patterns规则、支持多级嵌套，并可用explorer.fileNesting.exclude排除特定文件。
如果您在VSCode中管理大量相关文件，例如组件、样式表和测试文件，文件浏览器可能变得杂乱无章。File Nesting功能允许将逻辑上关联的文件以嵌套形式展示，从而减少视觉干扰并提升导航效率。以下是启用与配置该功能的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用File Nesting基础支持
VSCode默认未完全激活File Nesting功能，需通过设置启用其底层解析能力。此操作为后续自定义嵌套规则提供前提条件。
1、按下 Cmd + , 打开设置界面。
2、在搜索栏输入 files.associations，定位到该设置项。
3、点击右上角的打开设置（JSON）图标，进入 settings.json 编辑模式。
4、在 JSON 文件末尾的花括号内添加如下行（注意逗号分隔）："files.nested": true。
二、配置内置嵌套规则
VSCode内置了针对常见前端框架的默认嵌套逻辑，如将 .css、.scss 和 .test.tsx 文件自动归入同名 .tsx 文件下方。需手动声明这些规则以激活。
1、在 settings.json 中新增键值对："explorer.fileNesting.patterns"。
2、为其赋值一个对象，例如：{"*.tsx": ["*.css", "*.scss", "*.test.tsx"]}。
3、保存文件后，刷新资源管理器视图（可关闭再重开侧边栏或执行 Developer: Reload Window）。
三、扩展自定义嵌套层级
当项目使用非标准后缀或存在多级依赖关系时，可通过嵌套数组语法实现二级折叠，例如将 index.module.css 嵌套进 index.tsx，再将 index.stories.tsx 嵌套进该CSS文件。
1、修改 "explorer.fileNesting.patterns" 的对应值为数组嵌套格式：{"*.tsx": ["*.module.css", "*.stories.tsx"], "*.module.css": ["*.stories.tsx"]}。
2、确保各层级文件名前缀严格一致（如 Button.tsx、Button.module.css、Button.stories.tsx）。
3、重启VSCode窗口使嵌套层级生效。
四、禁用特定文件类型的自动嵌套
某些场景下，如同时存在多个同名但用途迥异的文件（例如 utils.ts 与 utils.test.ts），默认嵌套可能导致误折叠。此时需显式排除干扰项。
1、在 settings.json 中添加新键："explorer.fileNesting.exclude"。
2、将其值设为数组，列出不参与嵌套的完整文件名或通配符，例如：["utils.test.ts", "legacy/*.js"]。
3、保存后，被排除的文件将始终以平级方式显示于资源管理器中。
