文件嵌套功能可通过配置 explorer.fileNesting.patterns 将关联文件树状展示，如 .ts 与生成的 .js、.js.map 分组显示，提升项目结构清晰度，适用于 TypeScript、CSS 预处理等场景，需启用 explorer.fileNesting.enabled 并合理设置匹配规则，建议保持 VSCode 更新以获得最佳支持。
VSCode 本身不直接支持像 Visual Studio 那样的“文件嵌套”功能（即自动将 .js 文件显示为 .ts 的子项，或把 .min.js 显示为 .js 的附属），但可以通过设置 “文件嵌套”（File Nesting） 规则来实现智能分组显示。这个功能主要由 VSCode 的 Explorer: File Nesting 配置驱动。
什么是文件嵌套？
文件嵌套允许你将相关联的文件在资源管理器中以树状结构展示，比如：
example.ts└── example.js
└── example.js.map
这样可以减少视觉混乱，让项目结构更清晰，尤其适合前端项目中常见的源码与构建产物并存的情况。
启用并配置文件嵌套规则
打开 VSCode 设置（Ctrl + ,），搜索 "explorer.fileNesting.enabled"，勾选启用该功能。
然后找到 "explorer.fileNesting.patterns" 进行自定义规则配置。它接受一个键值对对象：
- 键：父文件名（或通配符）
- 值：要嵌套在其下的文件匹配模式
示例配置：
"explorer.fileNesting.patterns": { "*.ts": "$(capture).js, $(capture).js.map", "*.less": "$(capture).css, $(capture).css.map", "*.scss": "$(capture).css, $(capture).css.map", "package.json": "package-lock.json, npm-shrinkwrap.json", "tsconfig.json": "tsconfig.build.json" }说明：
- $(capture) 表示捕获父文件名的前缀部分（不含扩展名）
- 例如
app.ts会自动嵌套app.js和app.js.map - 多个模式用逗号分隔
实用建议与常见场景
根据项目类型添加合适的嵌套规则：
- TypeScript 项目：关联 .ts → .js/.map
- CSS 预处理器：.scss/.less → .css/.map
- HTML 主页：将 main.js、style.css 嵌套到 index.html 下
- 配置文件：如 webpack.config.js 与 webpack.config.prod.js 分组
也可以使用通配符进行批量匹配：
"*": "$(capture).d.ts"这会尝试将所有文件对应的声明文件进行嵌套（需谨慎使用，避免误匹配）。
注意事项
当前文件嵌套功能在某些情况下可能不会立即刷新，可尝试：
- 重启 VSCode
- 手动折叠/展开目录
- 检查拼写和语法是否正确（JSON 格式必须合法）
另外，此功能从 VSCode 1.78 版本开始引入并持续优化，建议保持编辑器更新。
基本上就这些，合理配置后能让项目结构更整洁，尤其适合文件生成类项目。不复杂但容易忽略的小技巧。
