必须将"explorer.filenesting.enabled": true显式启用,否则所有嵌套规则无效;键为父文件模式(如".ts"),值为同目录子文件列表(如".spec.ts"),父子文件名前缀须严格一致且大小写敏感。

必须先打开 explorer.fileNesting.enabled
不启用这个开关,后面所有规则都无效。很多人配了半天 explorer.fileNesting.patterns 没反应,就是卡在这一步。它默认是 false(尤其在旧版 VS Code 或团队共享配置中容易被覆盖),必须显式设为 true:
{
"explorer.fileNesting.enabled": true
}
注意拼写:是 fileNesting,不是 fileNesting 或 fileNesting —— 大小写敏感,VS Code 不会报错,但直接忽略整条配置。
explorer.fileNesting.patterns 怎么写才匹配 .spec.ts
规则本质是“谁当父、谁当子”:键(key)是父文件模式,值(value)是能被它收进去的子文件列表。想让 user.spec.ts 折叠进 user.ts 下,就得把 .ts 当父:
- 键必须是
"*.ts"(带通配符),不能是".ts"或"ts" - 值里必须写
"*.spec.ts",不能漏掉开头的*和点,也不能写成"spec.ts" - 大小写必须一致:
User.ts不会匹配"*.ts"规则下的User.spec.ts,得用"*.[tT][sS]"才行(但不推荐,易乱) - 父子文件必须在同一目录,
src/a.ts不会收起tests/a.spec.ts
示例:
{
"explorer.fileNesting.patterns": {
"*.ts": ["*.spec.ts", "*.test.ts"],
"*.js": ["*.spec.js", "*.test.js"],
"package.json": ["package-lock.json", "pnpm-lock.yaml", "yarn.lock"]
}
}
为什么改了配置没效果?三个现实检查点
不是语法问题,而是环境细节没对齐:
- 资源管理器没刷新:改完
settings.json后,必须点击侧边栏顶部的刷新按钮(或右键空白处选 Refresh),VS Code 不自动重载嵌套视图 -
explorer.fileNesting.expand被设为false:这会让嵌套组默认收起,看起来像“没生效”,其实已折叠,点父文件旁的小箭头就能展开 - VS Code 版本低于 1.86:原生 File Nesting 功能从 1.86 开始稳定支持,旧版本即使配了也无效;此时装插件反而可能冲突
复杂嵌套场景:用 $(capture) 匹配文件名前缀
当需要精确控制子文件名(比如 app.js 只收 app.min.js,不收 utils.min.js),就得用 $(capture):
-
"*.ts": "$(capture).js, $(capture).d.ts"表示:如果存在api.ts,就尝试收起api.js和api.d.ts -
$(capture)只捕获主文件扩展名前的部分,不包含路径,也不支持正则 - 不能混用:
"*.ts": ["$(capture).js", "*.spec.ts"]是合法的,但"$(capture).ts"作为键是无效的
这种写法适合构建产物关联(如 index.ts → index.js → index.js.map),但对测试文件这类靠命名约定的场景,还是用 "*.ts": ["*.spec.ts"] 更直接可靠。











