VSCode 1.86+ 可通过配置 files.associations 和 files.nestedPatterns 启用文件嵌套，支持全局、工作区及 glob 动态匹配，并可排除特定文件类型。
如果您在使用 VSCode 开发项目时发现同一功能模块的多个文件（如 .ts、.html、.scss）散落在文件资源管理器中，缺乏层级关联，则可能是由于 File Nesting 功能未启用或配置不完整。以下是启用并自定义该功能的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用内置 File Nesting 支持
VSCode 1.86 版本起已集成基础的文件嵌套能力，无需安装扩展，但需手动开启配置项以激活该功能。
1、按下 Cmd + , 打开设置界面。
2、在搜索框中输入 files.associations，找到对应设置项。
3、点击右侧的“在 settings.json 中编辑”链接。
4、在打开的 settings.json 文件中，添加以下配置块（若已有 "files.associations" 字段，则合并其键值对）：
"files.associations": { "*.component.ts": "typescript", "*.component.html": "html", "*.component.scss": "scss" }
二、配置 files.nestedPatterns 实现自动折叠
该设置定义哪些文件应作为子项嵌套在父文件下方，依赖文件名匹配规则，支持通配符和正则语法，是实现视觉层级的关键。
1、在 settings.json 中新增或修改 files.nestedPatterns 字段。
2、为 Angular 组件添加嵌套规则：
"*.component.ts": ["*.component.html", "*.component.scss", "*.component.spec.ts"]
3、为 React 函数组件添加嵌套规则：
"*.tsx": ["*.module.css", "*.test.tsx", "*.stories.tsx"]
4、保存 settings.json，刷新资源管理器或重启 VSCode。
三、通过 workspace 级配置实现项目专属嵌套
将嵌套规则限定于当前项目，避免全局干扰，适用于多语言混合或定制化结构较强的工程。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
1、在项目根目录下创建 .vscode/settings.json 文件（若不存在）。
2、写入仅作用于本项目的 nestedPatterns 配置，例如：
"files.nestedPatterns": { "index.ts": ["types.ts", "constants.ts", "utils.ts"] }
3、确保工作区设置未被用户级设置覆盖，可通过命令面板执行 Developer: Inspect Editor Tokens and Scopes 验证生效范围。
四、使用 glob 模式匹配动态文件名
当组件名称含版本号、环境标识等可变后缀时，静态字符串无法覆盖全部情况，需借助 glob 通配能力提升匹配覆盖率。
1、在 files.nestedPatterns 中使用 ** 匹配任意层级路径，* 匹配单段文件名。
2、配置支持带数字后缀的组件：
"*.[0-9].component.ts": ["*.component.html", "*.component.scss"]
3、配置支持环境区分的样式文件：
"*.component.ts": ["*.component.*.scss", "*.component.scss"]
五、禁用特定文件类型的自动嵌套
某些场景下需阻止默认嵌套行为（如防止 .d.ts 文件被折叠进同名 .ts 下），可通过负向模式或精确排除实现。
1、在 files.nestedPatterns 中为该文件类型设置空数组：
"*.d.ts": []
2、若需排除某类命名模式，使用否定前缀 !*.spec.ts（注意：此语法仅在部分 glob 引擎中有效，VSCode 当前版本推荐采用显式空数组方式）。
3、重启资源管理器后，原被折叠的 .d.ts 文件将恢复平铺显示。
