VSCode通过explorer.fileNesting.patterns配置实现文件视觉分组，如将.js与.test.js等关联，提升项目可读性，适用于前端或模块化开发，配置后可在资源管理器中折叠显示相关文件，优化导航效率。
在 VSCode 中，文件嵌套或分组显示能显著提升项目结构的可读性，尤其在前端或模块化开发中，相关文件（如 .js 与 .css、.test.js）常希望被归类在一起。虽然 VSCode 默认不自动嵌套文件，但可通过配置实现资源管理器中的“视觉分组”效果。
理解文件嵌套机制
VSCode 并未提供传统意义上的“文件夹嵌套”功能，但支持通过 explorer.fileNesting.patterns 配置项，在资源管理器中将指定文件“收起”到主文件下，形成类似父子层级的展示方式。这有助于减少视觉干扰，让关联文件更紧凑。
启用并配置文件嵌套
打开设置（Ctrl + ,），搜索 file nesting，找到“Explorer: File Nesting”选项，或直接在 settings.json 中添加规则：
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.js": ["*.test.js", "*.config.js", "*.spec.js"],
"*.ts": ["*.test.ts", "*.spec.ts", "*.d.ts"],
"index.html": ["styles.css", "script.js"],
"package.json": ["package-lock.json", "npm-shrinkwrap.json"]
}
}
以上配置表示：当存在 app.js 时，app.test.js 和 app.config.js 将作为嵌套文件折叠显示在其下方。
基于项目定制嵌套规则
不同项目类型适合不同的嵌套策略。例如：
- React 项目：将 .jsx/.tsx 与对应的 .css/.scss、.test.js 关联
- Vue 单文件组件：虽通常为单文件，但可将 component.vue 与配套的 component.utils.ts 分组
- 后端 Node.js：把 server.js 与中间件或路由配置文件聚合
示例配置：
{
"explorer.fileNesting.patterns": {
"*.vue": ["*.scss", "*.test.js"],
"*.component.ts": ["*.component.spec.ts", "*.component.html"],
"*.service.ts": ["*.service.mock.ts"]
}
}
注意事项与技巧
文件嵌套仅为视觉组织，不影响实际目录结构。几点提醒：
- 确保 explorer.fileNesting.enabled 设为 true
- 通配符 * 匹配任意字符，但需注意命名唯一性，避免误匹配
- 若某规则导致混乱，可用 "*.js": "" 显式清空特定类型的嵌套
- 支持相对路径模式，如 "src/index.js": ["src/polyfill.js"]
基本上就这些。合理利用文件嵌套，能让资源管理器更清爽，尤其适合文件密集型项目。配置一次，长期受益。
