需启用并配置 VSCode 的 File Nesting 功能：一、勾选 Settings 中 Files: Enable File Nesting；二、在 settings.json 添加 files.nesting.patterns 规则；三、可为当前工作区单独配置以避免全局影响；四、必要时先用 files.associations 关联扩展名。
如果您在使用 VSCode 开发项目时发现文件树杂乱、同类型文件（如组件及其样式、测试、类型声明）分散排列，则可能是由于默认未启用或未正确配置 File Nesting 功能。以下是启用并自定义该功能的具体操作步骤：
本文运行环境：MacBook Pro，macOS Sequoia。
一、启用 File Nesting 功能
VSCode 的 File Nesting 功能默认处于关闭状态，需手动开启才能使嵌套规则生效。启用后，编辑器将依据配置自动折叠关联文件至主文件下方。
1、打开 VSCode 设置界面，可通过快捷键 Cmd + , 实现。
2、在设置搜索框中输入 file nesting。
3、勾选 Files: Enable File Nesting 选项。
二、通过 settings.json 手动配置嵌套规则
内置的默认嵌套规则覆盖有限，需编辑工作区或用户级 settings.json 文件，添加自定义 patterns，以支持如 .vue/.scss、.ts/.test.ts、.tsx/.module.css 等组合。
1、按下 Cmd + Shift + P 打开命令面板。
2、输入并选择 Preferences: Open Settings (JSON)。
3、在 JSON 文件中插入以下字段（若已存在 files.associations，则仅追加）：
4、添加如下配置块：
"files.nesting.enabled": true,
"files.nesting.patterns": {
"*.ts": ["*.test.ts", "*.spec.ts", "*.d.ts"],
"*.vue": ["*.scss", "*.css", "*.less", "*.ts"],
"*.tsx": ["*.module.css", "*.module.scss"]
}
三、为当前工作区单独配置嵌套规则
避免影响其他项目，可将嵌套规则限制在当前工作区范围内。此方式优先级高于全局设置，且不干扰其他项目的文件视图表现。
1、在项目根目录下确认存在 .vscode/settings.json 文件；若无，手动创建该路径及文件。
2、在该文件中写入与上一步相同的 files.nesting.patterns 配置项。
3、保存文件后，重新加载窗口（Cmd + Shift + P → Developer: Reload Window）。
四、使用文件关联（files.associations）辅助嵌套识别
某些扩展名未被 VSCode 默认识别为同类型文件（如 .config.js 与 .config.ts），此时需先建立语言关联，再配合 nesting 规则实现嵌套。
1、在 settings.json 中添加 files.associations 字段。
2、将目标扩展名映射到对应语言 ID，例如：
"files.associations": {
"*.config.js": "javascript",
"*.config.ts": "typescript"
}
3、随后在 files.nesting.patterns 中引用这些已关联的扩展名。
