vscode 1.86+ 原生支持文件嵌套(非折叠),通过 explorer.filenesting 配置实现:启用 enabled,在 patterns 中以主文件为键、附属文件为值数组,如 "*.ts": ["*.d.ts", "tsconfig.json"],仅影响资源管理器层级展示。

如何在 VSCode 中配置文件嵌套折叠(file nesting)
VSCode 1.86+ 原生支持 explorer.fileNesting 配置,无需插件即可让 tsconfig.json、package.json 等配置文件自动缩进显示在对应源码文件下方。关键不是“折叠”,而是“视觉嵌套”——它改变的是资源管理器里的层级展示逻辑,不是代码块折叠。
直接修改用户或工作区设置:
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.ts": ["*.d.ts", "tsconfig.json"],
"*.js": ["*.d.ts", "package.json", "webpack.config.js"],
"package.json": ["package-lock.json", "pnpm-lock.yaml", "yarn.lock"],
"tsconfig.json": ["tsconfig.*.json"]
}
}
-
explorer.fileNesting.enabled必须为true,否则所有patterns不生效 - 键(key)是“主文件”模式,值(value)是“挂载在其下的附属文件”列表,按顺序从上到下排列
- 模式支持通配符,但不支持正则;
*匹配任意非路径分隔符字符,**不被支持 - 同一目录下若存在多个匹配项(如
tsconfig.json和tsconfig.app.json),后者会出现在前者下方
为什么 tsconfig.json 没有自动挂在 .ts 文件下面?
默认情况下 VSCode 不启用任何嵌套规则,即使你装了旧版插件(如 File Nesting)也可能与原生功能冲突。常见原因有三个:
- VSCode 版本低于 1.86 —— 原生嵌套功能尚未引入,此时只能用插件,但插件行为不统一且易出错
-
explorer.fileNesting.patterns中没写"*.ts": ["tsconfig.json"]—— 注意这里写的是字符串数组,不是正则,且tsconfig.json是精确文件名,不能写成"tsconfig.*" - 设置了
"explorer.fileNesting.expand": false—— 这个配置控制是否默认展开嵌套组,设为false时看起来像“没生效”,其实是收起来了
package.json 相关文件怎么正确嵌套?
要让 package-lock.json、pnpm-lock.yaml 等锁文件紧贴 package.json 显示,必须把 package.json 本身作为 key,而不是用通配符匹配它:
"package.json": ["package-lock.json", "pnpm-lock.yaml", "yarn.lock"]
这样配置后,只要目录里有 package.json,其后的锁文件就会缩进显示在它下方。注意:
- 不要写成
"*.json": [...]——这会导致所有.json文件都尝试挂载锁文件,造成混乱 - 如果项目同时存在
package.json和packages/*/package.json,嵌套只作用于同级目录,不会跨子目录生效 -
node_modules文件夹始终不参与嵌套,无论你怎么配都不会在里面显示嵌套结构
嵌套规则和编辑器折叠(folding)是两回事
很多人搜“嵌套折叠”其实是想点一下就收起 tsconfig.json 内容,但这属于代码区域的 折叠(folding),由语言服务提供,和 explorer.fileNesting 完全无关。TS 文件能否折叠取决于:
- 是否启用了
"editor.foldingStrategy": "indent"` 或 `"syntax"`
- 当前文件是否被识别为
typescript 语言模式(检查右下角状态栏) -
tsconfig.json是 JSON,不支持语法级折叠,只能靠缩进折叠 —— 所以确保它格式化良好(无多余空格/制表符混用)
真正容易被忽略的是:嵌套规则只影响资源管理器(Explorer)视图,对编辑器标签页、搜索结果、Git 更改列表等地方毫无影响。改完配置记得重启侧边栏或重载窗口(Ctrl+Shift+P → Developer: Reload Window),否则可能看不到变化。











