如何在 Visual Studio 代码中隐藏边栏中的某些文件？

Question

在 Visual Studio 代码 中，可以配置什么设置，使用文件模式，隐藏边栏文件资源管理器中的文件？

我想隐藏某些文件组，例如 .meta 和 .git 文件。

Answer 1

您可以配置模式以在资源管理器和搜索中隐藏文件和文件夹。

打开 VS 用户设置（主菜单：File > Preferences > Settings）。这将打开设置屏幕。
在顶部的搜索中搜索 files:exclude。
根据需要使用新的 glob 模式配置用户设置。在这种情况下，添加此模式 node_modules/ 然后单击“确定”。 模式语法很强大。您可以在 Search Across Files topic.

完成后应该如下所示：

如果您想直接编辑设置文件：例如隐藏工作区中的顶级 node_modules 文件夹：

"files.exclude": {
    "node_modules/": true
}

隐藏所有以 ._ 开头的文件，例如在 OSX 上找到的 ._.DS_Store 文件：

"files.exclude": {
    "**/._*": true
}

您还可以更改工作区设置（主菜单：File > Preferences > Workspace Settings）。工作区设置将在您当前的工作区中创建一个 .vscode/settings.json 文件，并且只会应用于该工作区。用户设置将全局应用于您打开的任何 VS Code 实例，但它们不会覆盖工作区设置（如果存在）。阅读有关自定义 User and Workspace Settings.

的更多信息

Answer 2

有时您只想隐藏特定项目的某些文件类型。在这种情况下，您可以在项目文件夹中创建一个名为 .vscode 的文件夹，并在其中创建 settings.json 文件（即 .vscode/settings.json）。该文件中的所有设置只会影响您当前的工作区。

例如，在一个TypeScript项目中，这是我用过的：

// Workspace settings
{
    // The following will hide the js and map files in the editor
    "files.exclude": {
        "**/*.js": true,
        "**/*.map": true
    }
}

Answer 3

我还想推荐 vscode 扩展程序 Peep，它允许您切换隐藏项目中排除的文件 settings.json。

点击F1进入vscode命令行（命令面板），然后

ext install [enter] peep [enter]

您可以将 "extension.peepToggle" 绑定到一个键，例如 Ctrl+Shift+P（默认情况下与 F1 相同）以便于切换。按 Ctrl+K Ctrl+S 键绑定，输入 peep、select Peep Toggle 并添加您的绑定。

Answer 4

对于使用 Unity3D 的 .meta 个文件，我发现最好的隐藏模式是：

"files.exclude": {
  "*/**/**.meta": true
}

这会捕获所有文件夹和子文件夹，并且除了 foo.meta

之外还会选择 foo.cs.meta

Answer 5

“Make Hidden”扩展非常有用！

Make Hidden provides more control over your project's directory by enabling context menus that allow you to perform hide/show actions effortlessly, a view pane explorer to see hidden items and the ability to save workspaces to quickly toggle between bulk hidden items.

Answer 6

如果您在 Angular 2+ 应用程序上工作，并且像我一样喜欢干净的工作环境，请按照@omt66 的回答并将以下内容粘贴到您的 settings.json 文件。我建议您在完成所有初始设置后执行此操作。

注意：这实际上也会隐藏 .vscode 文件夹（带有 settings.json）。（如果您之后需要进行更改，请在您的本机文件资源管理器/文本编辑器中打开）

https://pastebin.com/X2NL6Vxb

{
    "files.exclude": {
        ".vscode":true,
        "node_modules/":true,
        "dist/":true,
        "e2e/":true,
        "*.json": true,
        "**/*.md": true,
        ".gitignore": true,
        "**/.gitkeep":true,
        ".editorconfig": true,
        "**/polyfills.ts": true,
        "**/main.ts": true,
        "**/tsconfig.app.json": true,
        "**/tsconfig.spec.json": true,
        "**/tslint.json": true,
        "**/karma.conf.js": true,
        "**/favicon.ico": true,
        "**/browserslist": true,
        "**/test.ts": true
    }
}

Answer 7

__pycache__文件夹和*.pyc文件对开发者来说完全没有必要。要从资源管理器视图中隐藏这些文件，我们需要为 VSCode 编辑 settings.json。添加文件夹和文件，如下所示：

"files.exclude": {
  ...
  ...
  "**/*.pyc": {"when": "$(basename).py"}, 
  "**/__pycache__": true,
  ...
  ...
}

Answer 8

我过去遇到过同样的问题，因为我想删除我们成功运行 .java 文件后生成的 .class 文件，所以 .class文件在编译后自动创建，.exe 文件在编译 C 或 C++ 代码后创建。

执行此操作的最简单方法是通过按 F1 并从弹出窗口中选择 Preferences: Open Workspace Settings 来更改您的工作区设置。之后滚动到 Files: Exclude 行并在列表中添加标签 - **/*.class，现在 .class 文件将不会显示在 Vscode 项目文件资源管理器中。

您可以使用相同的方法删除 .exe 文件，方法是使用标签 **/*.exe 对于 C 和 C++ 文件。

谢谢

曼普雷特·辛格

Answer 9

如果您正在使用 VSCode：

文件 > 首选项 > 设置
搜索：

files:exclude

然后添加

**/node_modules

单击OK。

您不需要重新启动或重新加载 VSCode 即可生效

Answer 10

如果您希望隐藏 node_modules.
之类的内容，那么接受的答案是完美的如果您正在使用像 Astro.js 这样的静态 meta-framework，您最终会得到 index.astro 个文件，但由于 dist/test/index.html 或 /dist/about-page/index.html等...页面。

要从命令选项板 search 中排除它们，但仍然能够检查文件树中的 dist 文件夹，我建议在 .vscode/settings.json 文件

{
  "search.exclude": {
    "dist/**": true
  }
}

这样一来，您仍然可以看到它，同时不会污染您的 ctrl + p 搜索。

PS：更多信息可以found here（打开后再次提交URL直接进入高亮）

Answer 11

VS Code 的文件嵌套功能

请看下面的 GIF

我回答了这个问题，File-nesting 作为一个或两个月前的答案，然而，该功能尚未真正发布，但今天 "VS 代码文件嵌套功能"正式发布。

这肯定是过去 6 个月左右发布的最酷的功能之一。我花时间创建了一个 gif，它显示了我用来获取 gif 演示的功能的配置。我还将介绍每个可用的设置。

您在下面看到的 GIF 显示了 File-Nesting 及其工作原理。

gif 显示了一个折叠控件，该控件能够将文件切换进出视图（有人可能会说它隐藏了它们，这是一个准确的说法）。但是，它在没有目录的情况下执行此操作。此时的问题是 如何？ 它如何知道要隐藏哪个？

File-nesting 必须配置。您必须在 GIF 右侧添加您在我的 settings.json 文件中看到的设置，但在您再次观看 GIF 之前，让我们查看下面的每个文件嵌套设置。

可用配置

以下摘录直接摘自“VS Code April 2022 release”

的发行说明

explorer.fileNesting.enabled
- 控制是否启用文件嵌套at-large。它可以全局设置或为特定工作区设置。
explorer.fileNesting.expand
- 控制嵌套文件是否默认展开。
explorer.fileNesting.patterns
- 控制文件的嵌套方式。默认配置为 TypeScript 和 JavaScript 项目提供嵌套智能，但我们鼓励您修改它以适应您自己项目的结构。一些例子：

最重要的设置是`explorer.fileNesting.patterns`

...因为它是您用来定义如何嵌套文件的设置。当您将它输入到您的 settings.json 配置文件中时，VSCode 会自动建议一个配置，如果不是出于任何其他原因，您绝对应该采纳该建议并将其添加到您的配置文件中；这是展示如何使用此功能的一个很好的例子。 Gif 显示了我一直在玩弄的一些配置，但我将在下面 post 它们，因此您可以看到配置的实际文本。

我强烈建议将工作区上的“File-nesting”配置保持在工作区级别。

我发现如果我尝试在我的全局 (或 user-scoped) settings.json 文件。

此外，尽管 file-nesting 很酷，但它并没有取代 "files.exclude" 它只是对它的赞美，我可以补充一下。

以下是我用于 ESM NodeJS TypeScript 项目的默认配置，我的大部分项目都是这样。配置是通用的，并且会因项目而异。

  "files.exclude": {
    // -------- PROJECT DIRECTORIES --------
    "**/.git/": true,
    "node_modules/": true,
    "out/": true,
    "typings/": true,

    // ------- PROJECT FILES -------
    "LICENSE": true,
    "README.md": true
  },

  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.js",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts",
    ".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",
    "tsconfig.json": "tsconfig.*.json, package.json, .gitignore",
  },

如果您想发出与您的 source-documents 内联的编译器（或转译器）输出，那么此功能对您来说价值十倍。我总是在标准 compiled-language file-structure 之外工作，其中有一个包含源目录的根目录和一个输出目录，所以我永远不会将 JS 发送到我的 TS 中，但是如果你这样做, 此功能将允许您嵌套 JS/TS 文件对。或者，如果您编写 C/C++，则可以将 *.o 文件与 *.c 文件嵌套。

它只是一种隐藏文件的好方法，以一种整合所有内容的方式，同时又使其易于访问。

Answer 12

打开设置并搜索 Files.Exclude 然后点击 add pattern 然后它会发出通知 Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again. 现在打开 settings.json 文件并搜索 files.exclude{ } 块并包含 "**/*.exe": true 这里我以 .exe 为例，而不是使用你想阻止的任何扩展名。希望对您有所帮助。

如何在 Visual Studio 代码中隐藏边栏中的某些文件？

How do I hide certain files from the sidebar in Visual Studio Code?

configuration

visual-studio-code

VS Code 的文件嵌套功能

请看下面的 GIF

您在下面看到的 GIF 显示了 File-Nesting 及其工作原理。

可用配置

最重要的设置是`explorer.fileNesting.patterns`

如何在 Visual Studio 代码中隐藏边栏中的某些文件？

How do I hide certain files from the sidebar in Visual Studio Code?

configuration

visual-studio-code

VS Code 的文件嵌套功能

请看下面的 GIF

您在下面看到的 GIF 显示了 File-Nesting 及其工作原理。

可用配置

最重要的设置是explorer.fileNesting.patterns

最重要的设置是`explorer.fileNesting.patterns`