文件嵌套功能可将相关文件（如.JS与.test.js）组织在一起，通过配置explorer.fileNesting.patterns规则实现，如设置”.js”: [“.test.js”, “*.js.css”]，使测试和样式文件折叠显示在主文件下，提升项目结构清晰度，建议团队统一配置并提交至版本控制。

在 vscode 中，文件嵌套功能可以帮助你把相关的文件（如组件、样式、测试文件）组织在一起，提升项目结构的清晰度。默认情况下，VSCode 会根据文件名和扩展名自动识别部分关联文件，但你也可以通过配置来自定义文件嵌套规则。

启用并配置文件嵌套

VSCode 提供了 “File Nesting” 功能，允许你将某些文件显示为其他文件的子项。比如把 .css、.test.js 或 .ts 文件折叠在主文件下。

要配置文件嵌套，打开设置（Ctrl+,），搜索 “file nesting”，你会看到两个关键选项：

• Explorer: File Nesting – 开启或关闭文件嵌套功能
• Explorer: File Nest Patterns – 定义嵌套匹配规则

自定义嵌套规则

点击 “Edit in settings.json”，在配置中添加你自己的模式。例如，你想让 index.js 和它的 index.css、index.test.js 聚合在一起，可以这样写：

 "explorer.fileNesting.patterns": {   "*.js": ["*.js.css", "*.test.js", "*.spec.js"],   "*.ts": ["*.ts.scss", "*.test.ts", "*.spec.ts"],   "component.vue": ["component.style.scss", "component.test.js"] } 

这个配置表示：所有以 .js 结尾的文件，其旁边如果有 .test.js 或 .js.css 文件，就会被折叠成子文件显示。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

8

查看详情

实际效果与使用建议

配置完成后，资源管理器中原本平铺的文件会自动分组。比如：

 component.js ├── component.test.js ├── component.css 

这样能大幅减少视觉干扰，尤其适合 react、Vue 等组件化开发项目。

建议根据团队项目结构统一配置，并通过 .vscode/settings.json 提交到版本控制，确保所有人体验一致。

基本上就这些，合理使用文件嵌套能让项目更整洁，找关联文件也更快。不复杂但容易忽略的小技巧。