VSCode 1.86+ 可通过 File Nesting 功能将 .js、.d.ts 等生成文件嵌套在 .ts 等源文件下：需在 settings.json 中配置 "explorer.fileNesting.patterns"，支持按语言定制规则、工作区级隔离及搭配图标主题提升可读性。
如果您在使用 VSCode 开发项目时发现大量生成文件（如 .js、.d.ts、.map）与源文件（如 .ts、.jsx）混杂在同一目录下，导致文件列表臃肿难辨，则可能是由于 VSCode 默认未启用或未正确配置 File Nesting 功能。以下是组织生成文件的多种方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、启用并配置内置 File Nesting 设置
VSCode 1.86+ 版本内置了 File Nesting 功能，可通过 workspace 或 user 设置定义文件嵌套规则，使生成文件以缩进形式显示在对应源文件下方，不改变实际文件系统结构。
1、打开 VSCode 命令面板（Cmd + Shift + P），输入并选择 Preferences: Open Settings (JSON)。
2、在 settings.json 中添加 "explorer.fileNesting.patterns" 配置项。
3、为 TypeScript 项目添加典型规则："*.ts": ["*.js", "*.d.ts", "*.js.map", "*.d.ts.map"]。
4、保存文件后，资源管理器中 .ts 文件旁将出现小箭头，点击即可展开/收起关联生成文件。
二、按语言类型定制嵌套模式
不同语言生成的衍生文件命名习惯不同，需针对性编写匹配模式，避免误嵌套；VSCode 支持通配符和多值数组，可精确控制每类源文件的附属文件范围。
1、在 settings.json 的 "explorer.fileNesting.patterns" 对象内新增 JSX 规则："*.jsx": ["*.js", "*.js.map"]。
2、添加 SCSS 编译规则："*.scss": ["*.css", "*.css.map"]。
3、对存在同名但非衍生关系的文件（如 index.ts 和 index.test.ts），通过排除模式规避："*.ts": ["*.js", "*.d.ts"], "*.test.ts": []。
三、使用工作区级嵌套配置隔离项目差异
全局设置可能不适用于所有项目，例如某些项目禁用 source map 或采用自定义输出路径；此时应优先在 .vscode/settings.json 中定义嵌套规则，确保配置随项目提交且不干扰其他工程。
1、在项目根目录创建 .vscode 文件夹（若不存在）。
2、在该文件夹中新建 settings.json 文件。
3、写入仅适用于当前项目的嵌套规则，例如：{"explorer.fileNesting.patterns": {"*.py": ["*.pyc", "__pycache__/"]}}。
4、重新加载窗口（Cmd + Shift + P → Developer: Reload Window）使配置生效。
四、结合文件图标主题提升嵌套可读性
仅靠缩进可能难以快速识别嵌套层级中的文件类型，启用支持 File Nesting 的图标主题可为源文件与生成文件赋予视觉区分，强化层级感知。
1、在扩展市场中安装 Material Icon Theme 或 One Monokai 等支持嵌套图标的主题。
2、打开设置（Cmd + ,），搜索 File Icon Theme，从下拉菜单中选择已安装的主题。
3、确认主题设置中已启用 "material-icon-theme.nestedFoldersColorize": true（若使用 Material 主题）。
4、观察资源管理器中嵌套项的图标颜色是否产生差异，例如 .ts 为蓝色、.js 为橙色、.map 为灰色。
