VS Code 中的文件嵌套

VS Code v1.64几天前发布了，它再次带来了许多令人惊喜的新功能和改进。其中一个令人兴奋的新功能是侧边栏旁边的侧面板，它可以打开在屏幕的另一侧，也就是侧边栏的对面，让你可以同时打开更多视图。我能想象到这在大屏幕上会多么实用。

另一个吸引我眼球的新功能是实验性的文件嵌套支持。这项功能允许你将同一目录下的相关文件以可视化的方式“嵌套”/分组到“根”文件下。例如，假设你有一个main.ts文件，旁边还有文件main.js和main.d.ts文件main.js.map。启用并配置文件嵌套功能后，VS Code 会将这些文件以可视化的方式分组到文件main.*下main.ts，如下图所示：

现在您可以“折叠”main.ts文件并减少“杂乱”。请注意，文件仍然在同一目录中，它们只是在视觉上“嵌套”在main.ts.

如何启用和配置文件嵌套

新增了三个设置：

• explorer.experimental.fileNesting.enabled- 控制是否启用文件嵌套。
• explorer.experimental.fileNesting.expand- 控制文件嵌套是否默认显示为展开状态。
• explorer.experimental.fileNesting.patterns- 控制文件的嵌套方式。

注：以上描述摘自发布博客文章。

将 VS Code 更新到 v1.64 后，默认情况下文件嵌套功能未启用。请手动启用“文件嵌套：已启用”设置。如果在打开项目的情况下进行此操作，您可能会注意到文件 `<file1>` package-lock.json、.npmrc` <file2>`yarn.lock和.yarnrc`<file3>` 被嵌套在 `<file1>` 下package.json。这是因为 VS Code 有一个默认的模式列表，用于嵌套/分组文件。`<file1>`package.json模式就包含在该列表中，就像main.ts前面描述的示例一样。您能在下面的屏幕截图中找到这些模式吗？

创造你自己的图案

好了，现在您了解了文件嵌套的工作原理。我认为，通过参考“模式”列表中提供的示例，您可以创建自己的模式。

下一节我将展示一种特别适合 Angular 开发人员的模式。

Angular 开发人员的嵌套文件

在使用 Angular 组件时，我们通常会遵循一种文件结构约定，即一个组件由几个名称相似的文件表示。例如，除了 `<component>` 之外button.component.ts，我们可能还会有 `<component>`*.component.html|css|scss|spec和 ` <component>`。因此，对于一个组件，我们最终可能会在同一个目录下看到四五个不同的文件。如果能将大部分甚至全部文件都归类到主文件下，从而简化文件夹结构，button.module.ts岂不是更好？现在，我们完全可以做到这一点。*.component.ts

打开文件嵌套设置，在“模式”列表中创建一个新模式。您可以复制以下示例，也可以根据您的喜好进行修改：

// Item           // Value
"*.component.ts": "$(capture).component.html, $(capture).component.scss, $(capture).module.ts, $(capture).component.spec.ts"

VS Code 现在会将所有 <code> *.component.html、*.component.scss<code>*.component.spec.ts和*.module.ts<code> 文件以可视方式嵌套在 <code> 下*.component.ts，如下所示：

GIF

希望你学到了一些实用的小技巧。🎉

封面照片由Karen Ciocca拍摄，来自Unsplash