VSCode的“File Nesting”:整理你的项目文件视图

23次阅读

vscode 文件嵌套功能可解决目录混乱问题:一、启用 Explorer: File Nesting Enabled;二、在 settings.json 配置 patterns;三、自定义扩展名嵌套关系;四、设空数组禁用特定嵌套;五、用工作区设置统一团队规则。

VSCode的“File Nesting”:整理你的项目文件视图

如果您在 VSCode 中看到大量相关文件(如 htmlcssjavaScript)平铺在同一目录下,导致项目结构混乱,则可能是由于文件嵌套功能未启用或配置不当。以下是启用和配置“File Nesting”功能的具体步骤:

本文运行环境:macbook Pro,macos Sequoia。

一、启用 File Nesting 功能

VSCode 自 1.86 版本起原生支持 File Nesting,该功能通过识别文件名模式将子文件逻辑折叠到主文件下方,从而减少视觉干扰并提升导航效率。

1、打开 VSCode 的设置界面,可通过菜单栏选择 Code → Settings,或使用快捷键 Cmd + ,

2、在设置搜索框中输入 file nesting

3、勾选 Explorer: File Nesting Enabled 选项。

二、配置默认嵌套规则

VSCode 提供预设的常见框架嵌套规则(如 react 的 .jsx/.cssvue 的 .vue/.ts),这些规则定义了哪些扩展名应被自动归入主文件之下。

1、在设置中继续搜索 file nesting patterns

2、点击 Edit in settings.json 链接,进入 json 配置编辑模式。

3、在 settings.json 中添加或修改 “explorer.fileNesting.patterns” 字段,例如:
“*.js”: [“*.d.ts”, “*.test.js”, “*.spec.js”]

三、为特定文件类型自定义嵌套关系

当默认规则不满足项目需求时,可为单一文件扩展名单独指定其子文件匹配模式,实现更精细的视图组织。

VSCode的“File Nesting”:整理你的项目文件视图

网钛淘拍CMS(TaoPaiCMS) V1.60

2013年07月06日 V1.60 升级包更新方式:admin文件夹改成你后台目录名,然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示,后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品,增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称,“分类”改

VSCode的“File Nesting”:整理你的项目文件视图 0

查看详情 VSCode的“File Nesting”:整理你的项目文件视图

1、在 settings.json 中定位到 “explorer.fileNesting.patterns” 对象内部。

2、添加新键值对,键为父文件扩展名(含星号前缀),值为字符串数组,例如:
“*.component.html“: [“*.component.ts”, “*.component.scss”, “*.component.spec.ts”]

3、保存文件后,重启资源管理器或重新加载窗口(Cmd + Shift + P → Developer: Reload Window)。

四、禁用某类嵌套以保留独立显示

某些场景下需临时取消嵌套(如调试时需快速访问被折叠的配置文件),可通过覆盖规则实现局部禁用。

1、在 settings.json 中为对应扩展名设置空数组,例如:
“*.json”: []

2、该配置将阻止所有 .json 文件被任何其他文件嵌套,同时也不作为父文件收纳其他文件。

五、基于工作区覆盖全局嵌套设置

团队项目中可能需统一文件视图逻辑,此时应将嵌套规则写入工作区设置,避免影响用户全局偏好。

1、在项目根目录打开命令面板(Cmd + Shift + P),执行 Preferences: Open Workspace Settings (JSON)

2、在打开的 .vscode/settings.json 中插入 “explorer.fileNesting.patterns” 配置块。

3、确保该文件已提交至版本控制,以便其他协作者拉取后自动生效。

text=ZqhQzanResources