为什么你需要文件嵌套？先搞懂它能解决的3个真实痛点
别觉得文件嵌套是“花架子”，我用了大半年，真的帮我解决了3个每天都遇到的麻烦：
第一个是找文件慢。比如我之前找一个“Header.vue”的测试文件，得在目录里找“Header.test.ts”，有时候目录里文件多，要扫3秒才能找到——现在嵌套后，点一下“Header.vue”旁边的箭头，直接展开就能看到“Header.test.ts”，1秒搞定。
第二个是避免同名文件混淆。比如两个组件都叫“Button”，一个在“components/Button”文件夹，一个在“components/IconButton”文件夹，之前它们的.scss文件都叫“Button.scss”，放在各自的文件夹里，有时候会不小心点错——现在嵌套后，“components/Button/Button.vue”下面嵌套着“Button.scss”，“components/IconButton/Button.vue”下面嵌套着自己的“Button.scss”，再也不会混了。
第三个是多人协作更高效。我之前合作的一个React项目，团队里有个新人刚入职，误删了“Button.test.ts”，因为他以为那是没用的文件——后来我们统一配置了文件嵌套，把.test.ts嵌套在对应的.tsx下面，新人一看就知道“这个文件是和Button.tsx一组的，不能乱删”，这种低级错误再也没发生过。
VSCode官方文档里也提到，文件嵌套的设计目标就是“减少目录的视觉杂乱，让用户更快找到关联文件”，我觉得这完全说到了开发者的心坎里——毕竟谁不想让自己的项目目录像整理好的抽屉，而不是乱堆的衣柜呢？
从0到1配置VSCode文件嵌套：2种方法+复制即用的代码
其实VSCode的文件嵌套功能不难，我 了两种最常用的配置方法，不管你是喜欢手动写代码，还是想用插件偷懒，都能搞定。
方法1：直接改settings.json，基础配置一步到位
你得打开VSCode的settings.json——按Ctrl+Shift+P（或者Mac上的Command+Shift+P），输入“打开设置(JSON)”，回车就能打开。然后，在里面加一段“explorer.fileNesting.patterns”的配置，这就是控制文件嵌套的核心规则。
我最常用的配置是把.vue文件和它的.scss、.test.ts、.d.ts嵌套在一起，代码长这样：
"explorer.fileNesting.patterns": {
".vue": "${capture}.scss, ${capture}.test.ts, ${capture}.d.ts",
".tsx": "${capture}.scss, ${capture}.test.ts, ${capture}.story.tsx",
".js": "${capture}.json, ${capture}.test.js"
}
这里得给你解释一下：左边的“.vue”是主文件的匹配模式，意思是“所有后缀为.vue的文件都是主文件”；右边的“${capture}.scss”是关联文件的匹配模式，其中“${capture}”是个“占位符”——比如“Button.vue”的“${capture}”就是“Button”，所以“Button.scss”“Button.test.ts”这些文件名和主文件一致的文件，都会自动嵌套在“Button.vue”下面。
我之前踩过一个坑：把“${capture}”写成了“${ Capture }”（注意大小写和空格），结果规则完全不生效，折腾了半小时才发现——所以你复制代码的时候，一定要注意符号的大小写和空格，别犯我这种低级错误。
如果你想嵌套更多文件，比如把“.vue”和“.md”（组件文档）嵌套在一起，只要在右边加“, ${capture}.md”就行，像这样：".vue": "${capture}.scss, ${capture}.test.ts, ${capture}.d.ts, ${capture}.md"——是不是很简单？
方法2：用插件偷懒，自动生成常见框架的规则
如果你觉得手动写规则麻烦，或者你是刚接触VSCode的新手，可以试试File Nesting Updater这个插件——它能帮你自动生成React、Vue、Svelte等常见框架的文件嵌套规则，不用你写一行代码。
安装插件的方法很简单：打开VSCode的扩展市场（左边栏的四个方块图标），搜索“File Nesting Updater”，点安装就行。安装完成后，按Ctrl+Shift+P，输入“File Nesting: Apply Preset”，回车，然后选你用的框架（比如“Vue”“React”），插件就会自动把规则加到你的settings.json里——我之前做React项目时，用这个插件生成了.tsx和.scss、.test.ts的嵌套规则，省了我10分钟写代码的时间，真的超方便！
不过要注意：插件生成的规则是预设的，如果你有特殊需求（比如想嵌套“.vue”和“.php”文件），还是得手动改settings.json——毕竟插件是“通用工具”，没法照顾到所有个性化需求。
附赠：常见框架的文件嵌套规则参考表
为了节省你的时间，我整理了几个常见框架的嵌套规则，直接复制到settings.json里就能用：
| 框架 | 主文件后缀 | 关联文件后缀 | 复制即用的规则代码 |
|---|---|---|---|
| Vue 3 | .vue | .scss、.test.ts、.d.ts | ".vue": "${capture}.scss, ${capture}.test.ts, ${capture}.d.ts" |
| React | .tsx | .scss、.test.ts、.story.tsx | ".tsx": "${capture}.scss, ${capture}.test.ts, ${capture}.story.tsx" |
| Node.js | .js | .json、.test.js、.config.js | ".js": "${capture}.json, ${capture}.test.js, ${capture}.config.js" |
进阶技巧：让嵌套更智能的2个小tips
我再教你两个进阶技巧，帮你把文件嵌套用得更顺手：
"explorer.fileNesting.exclude": ["node_modules/", "dist/"]——这样node_modules和dist文件夹里的文件就不会被嵌套，保持原样。 .vscode/settings.json里——这样团队所有人打开项目，都能用到同样的嵌套规则，不用每个人自己配置。我现在做的项目都这么干，新人拉代码下来，直接就能看到整齐的目录，省了很多沟通成本。你有没有发现？其实文件嵌套功能的核心不是“配置”，而是“让关联文件聚在一起”——不管你用哪种方法，只要能让你的目录更清晰，就是好方法。我之前见过有人把所有文件都嵌套在“index.js”下面，虽然有点极端，但他说“这样找文件更快”，我觉得也没问题——毕竟适合自己的才是最好的。
如果你按上面的方法配置了，不妨打开你的项目目录看看，是不是瞬间清爽了？要是遇到配置不生效的问题，可以在评论区告诉我你的规则代码，我帮你看看哪里错了——毕竟我之前也踩过很多坑，比如把“.scss”写成了“.sass”（后缀错了），结果关联文件没嵌套进去，折腾了好久才发现。对了，你最想嵌套哪些文件？比如是组件和样式，还是服务文件和接口定义？欢迎留言跟我聊聊！
你要是配置了文件嵌套规则但没生效，先别急——我帮好多人排查过这问题，最常见的就三个原因，一个一个说给你听。
第一个是规则里的细节写错了。比如占位符${capture}写成${Capture}（就差个大写），或者后缀打错——我之前帮朋友看配置，他把.scss写成.sass，就多了个“a”，结果关联文件根本没嵌套进去，折腾半小时才发现；还有人把${capture}写成${cap}，占位符不对，VSCode根本认不出来，规则自然没用。
第二个更“低级”但超常见——改完settings.json没保存！好多人改完直接点叉关掉窗口，忘了按Ctrl+S（Mac是Command+S），VSCode没读到新规则，当然不生效啊。我自己刚用的时候也犯过这错：改完规则美滋滋打开项目，结果目录还是乱的，拍脑袋才想起“哦对，没保存！”
第三个是排除规则“误伤”了。比如你之前设置过“explorer.fileNesting.exclude”，把node_modules、dist这类文件夹排除嵌套了，结果你要嵌套的文件刚好在这些文件夹里——比如我之前把dist排除了，后来在dist里建了个组件想嵌套样式，死活没反应，最后翻设置才想起“哦，我把dist排除了”。
要是这三点都检查过了还不行，试试重启VSCode。有时候VSCode缓存没清掉，规则没加载进去，重启一下就好了——我遇到过一次，改了规则、保存了、也没排除，但就是不生效，重启之后立刻“唰”地嵌套好了。对了，还有种情况是规则顺序写反了——比如想让.vue嵌套.scss，结果写成“*.scss”: “${capture}.vue”，主文件和关联文件搞反了，那肯定不会嵌套，得再核对下规则的左右顺序对不对。
其实这些问题都不难，就是容易“眼瞎”——我刚开始学配置的时候，光占位符就错了三次，后来慢慢摸熟了，现在排查问题一分钟就能找到原因。你要是遇到了，按这几步查一遍，九成九能解决。
配置了文件嵌套规则，但为什么没生效？
可能有3个常见原因：一是规则中的占位符或后缀写错（比如把${capture}写成${Capture}，或把.scss写成.sass）；二是没保存settings.json文件（改完要按Ctrl+S保存）；三是排除规则影响了（比如你设置了node_modules文件夹排除嵌套，而文件刚好在这个目录里）。如果以上都没问题，试试重启VSCode。
可以让多个主文件嵌套同一个关联文件吗？
VSCode的文件嵌套规则默认是“一个关联文件只属于一个主文件”，比如如果有Button.vue和Button.ts，想让它们都嵌套Button.scss，这种情况无法实现——关联文件会优先匹配第一个符合条件的主文件规则。所以 尽量让关联文件只对应一个主文件，避免目录混乱。
用插件配置的规则和手动改settings.json冲突了怎么办？
VSCode的配置优先级是“工作区配置 > 全局settings.json > 插件预设”。如果插件的规则和你手动写的冲突，手动配置会覆盖插件规则。解决方法是：要么删除settings.json里的冲突规则，要么在插件设置中禁用其预设规则（比如File Nesting Updater可以在插件设置里关闭“Apply Preset on Startup”）。
工作区配置和全局配置的文件嵌套规则有什么区别？
全局配置（通过“打开设置(JSON)”修改的settings.json）会应用到你所有的VSCode项目；而工作区配置（项目根目录的.vscode/settings.json）只对当前项目生效。多人协作时 用工作区配置，因为可以通过Git同步给团队，确保所有人的嵌套规则一致。
能不能设置文件嵌套默认是展开还是折叠的？
VSCode原生功能目前不支持设置文件嵌套的默认展开/折叠状态，所有嵌套的文件默认是折叠的，需要手动点击主文件的箭头展开。如果需要自动展开，可以安装第三方插件（比如Auto Fold），但这类插件可能会影响VSCode的性能， 按需使用。
