VSCode 1.86+ 原生支持文件嵌套，需配置 explorer.fileNesting.patterns，如 "*.component.ts": ["*.component.html", "*.component.css"]，且要求父子文件同目录、命名严格匹配、explorer.fileNesting.enabled 为 true。
VSCode 怎么启用文件嵌套（file nesting）功能
VSCode 1.86+ 原生支持文件嵌套，不需要插件。关键不是“设置”，而是正确配置 explorer.fileNesting.patterns 这个设置项——它控制哪些文件该被谁折叠进去。
常见错误是直接搜“嵌套”或“折叠”，结果装了过时插件（比如 File Nesting），反而和原生功能冲突，导致嵌套不生效或行为异常。
- 打开设置（
Ctrl+,或Cmd+,），搜fileNesting.patterns - 点击「在 settings.json 中编辑」，添加类似这样的规则：
"explorer.fileNesting.patterns": {
"*.component.ts": ["*.component.html", "*.component.css", "*.component.spec.ts"],
"*.service.ts": ["*.service.spec.ts"],
"*.module.ts": ["*.module.spec.ts"]
}
注意：键（key）是“父文件”模式，值（value）是“子文件”列表；路径通配符只支持 * 和 **，不支持正则。
为什么改了 patterns 还不嵌套？检查这三点
最常卡在这几个地方，不是配置写错，而是环境或逻辑没对上。
-
explorer.fileNesting.enabled必须为true（默认开启，但可能被其他配置覆盖） - 文件必须在同一目录下——VSCode 不跨文件夹嵌套，
src/app/a.component.ts和src/app/a.component.html可以，但src/app/a.component.ts和src/assets/a.component.html不行 - 文件名必须严格匹配模式：比如你写了
"*.component.ts"，那user.component.ts就能匹配，但user-component.ts或userComponent.ts就不会被识别为父文件
如何让 .spec.ts 文件自动收进对应源文件下面
这是高频需求，但容易配反。核心原则：把 .spec.ts 当作“子”，源文件（如 .ts）当“父”。
错误配法："*.spec.ts": ["*.ts"] —— 这会让所有 .spec.ts 去找同名 .ts，但实际要的是反过来。
- 正确写法（以 Angular 组件为例）：
"*.component.ts": ["*.component.spec.ts"] - 通用写法（适用于普通模块）：
"*.ts": ["*.spec.ts"]，但要注意命名一致性：必须是utils.ts+utils.spec.ts，不能是utils.ts+test-utils.ts - 如果想同时支持多种后缀（如
.test.ts），得单独加一条："*.ts": ["*.spec.ts", "*.test.ts"]
嵌套后文件图标/展开状态异常怎么办
VSCode 的嵌套是纯 UI 层折叠，不影响文件系统或编辑器行为，但会干扰一些依赖文件名的扩展（比如测试运行器、代码导航）。
- 折叠后点不开子文件？检查是否误启用了
explorer.compactFolders（它会把单文件夹也压缩成一行，和嵌套叠加后视觉混乱） - 跳转到定义（
F12）失效？不是嵌套的问题，而是 TypeScript 语言服务没识别.spec.ts为关联文件——需确保tsconfig.json包含了 spec 文件（"include"字段） - 嵌套层级太深（比如
a.component.ts→a.component.html→a.component.scss）？VSCode 目前只支持一级嵌套，第二层会被忽略
真正麻烦的是多语言项目里混用不同约定（比如 React 的 Button.tsx + Button.module.css + Button.test.tsx），这时 pattern 规则得写得非常具体，稍有偏差就漏掉一个文件——别指望它智能推断，它只认字符串匹配。
