VSCode文件嵌套需手动启用并配置规则:先设"explorer.fileNesting.enabled": true,再通过"explorer.fileNesting.patterns"定义父子后缀关系,如".ts": [".spec.ts"];匹配区分大小写、仅限同目录、需手动刷新资源管理器。

VSCode 文件嵌套功能默认不开启,需手动配置 "explorer.fileNesting.enabled"
VSCode 的文件嵌套(File Nesting)不是开箱即用的功能,它不会自动把 index.ts 和 index.spec.ts 折叠成父子关系——必须显式启用并定义规则。很多人搜了半天“为什么没反应”,其实是卡在这一步。
操作很简单:打开设置(Ctrl+, 或 Cmd+, ),搜索 fileNesting.enabled,勾选它;或者直接编辑 settings.json:
{
"explorer.fileNesting.enabled": true
}
注意:fileNesting.enabled 是总开关,关了就完全不生效,哪怕后面规则写得再全也没用。
怎么写 "explorer.fileNesting.patterns" 才让 .spec.ts 嵌套进 .ts
启用之后,VSCode 默认只对极少数组合(如 .js + .d.ts)有内置规则。你要的 xxx.spec.ts → xxx.ts、xxx.test.js → xxx.js 这类,必须自己加 pattern。
patterns 是键值对:键是“父文件后缀”,值是“哪些后缀可被它折叠进去”。比如:
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.ts": ["*.spec.ts", "*.test.ts"],
"*.js": ["*.spec.js", "*.test.js"],
"*.vue": ["*.stories.vue", "*.cy.ts"]
}
}
- 键里的
*是通配符,匹配任意文件名,但只作用于后缀前的部分(即user.ts能收起user.spec.ts,但api.user.ts不会收起user.spec.ts) - 值中的字符串必须带点和后缀,不能写成
spec.ts,得是*.spec.ts - 多个模式之间无顺序依赖,但冲突时(比如两个键都匹配同一个子文件),以字典序靠前的键为准
常见失效原因:大小写、空格、路径层级和缓存
配置写完却没效果?大概率不是语法错,而是这几个现实细节:
-
explorer.fileNesting.enabled没设为true(尤其多人共用 settings.json 时容易被覆盖) - 文件名含大写字母,但 pattern 写的是小写(VSCode 的 pattern 匹配区分大小写,
Index.ts不匹配*.ts规则下的Index.spec.ts) - 子文件和父文件不在同一目录(嵌套只在同一级文件夹内生效,
src/a.ts不会自动收起src/test/a.spec.ts) - 改完设置后没刷新资源管理器——不用重启 VSCode,但要手动点击侧边栏顶部的刷新按钮(或右键空白处选
Refresh)
嵌套后双击展开/折叠行为和真实文件结构无关
文件嵌套纯属 UI 层视觉折叠,不改变磁盘路径、不影响保存、不干扰任何构建或运行时逻辑。你双击 index.ts 展开看到 index.spec.ts,删掉它只是删那个文件,不会连带删父文件。
这点特别容易误解:有人以为嵌套后 .spec.ts 变成了 index.ts 的“子资源”,其实它还是独立文件,只是 Explorer 画了个缩进而已。如果你依赖文件系统监听(比如 chokidar),它完全感知不到嵌套关系。
真正复杂的地方在于 pattern 的粒度控制——想让 foo.bar.ts 收起 foo.bar.spec.ts,但不想收起 bar.spec.ts,就得用更精确的通配(比如 "*.bar.ts": ["*.bar.spec.ts"]),而不是笼统的 *.ts。这种细粒度匹配,得靠反复试错+观察实际文件名来调。


















