如何在 Visual Studio Code 的侧栏中隐藏某些文件？

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

打开 VS 用户设置（主菜单：文件 > 首选项 > 设置）。这将打开设置屏幕。搜索文件：在顶部的搜索中排除。根据需要使用新的 glob 模式配置用户设置。在这种情况下，添加此模式 node_modules/ 然后单击 OK。模式语法很强大。您可以在 Search Across Files 主题下找到模式匹配详细信息。

https://i.stack.imgur.com/xHli0.png

如果您想直接编辑设置文件：例如在您的工作区中隐藏顶级 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 的更多信息。

---

有时您只想隐藏特定项目的某些文件类型。在这种情况下，您可以在项目文件夹中创建一个名为 .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
    }
}

---

“Make Hidden”扩展非常好用！

Make Hidden 通过启用允许您轻松执行隐藏/显示操作的上下文菜单、查看隐藏项的视图窗格浏览器以及保存工作区以在批量隐藏项之间快速切换的能力，提供对项目目录的更多控制。

---

开发人员完全不需要 __pycache__ 文件夹和 *.pyc 文件。要从资源管理器视图中隐藏这些文件，我们需要编辑 VSCode 的 settings.json。添加文件夹和文件，如下所示：

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

---

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

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

ext install [enter] peep [enter]

您可以将“extension.peepToggle”绑定到 Ctrl+Shift+P 之类的键（与 F1 相同默认）以便于切换。点击 Ctrl+K Ctrl+S 键绑定，输入 peep，选择 Peep Toggle 并添加您的捆绑。

---

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

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

这将捕获所有文件夹和子文件夹，并且除了 foo.meta 之外还会拾取 foo.cs.meta

---

如果您使用的是 VSCode：

文件 > 首选项 > 设置

搜索：

files:exclude

然后加

**/node_modules

单击确定。

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

---

如果您使用 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
    }
}

---

2022 年新的文件浏览器功能

有几个非常酷的新功能可以让开发人员配置显示在侧边栏中的文件，以及提供隐藏文件的新方法，同时保持它们可访问。

这个答案涵盖

“explorer.fileNesting”（2022 年 4 月新）“files.exclude” explorer.excludeGitIgnore（2022 年 6 月新）

文件排除

因此，这篇文章中最初包含的最佳答案是"files.exclude"

VS Code 的文件嵌套功能

因为“文件嵌套”是 IMO 在最近版本中添加到 VS Code 的最酷的功能之一，所以我想我会花时间创建一个动画 GIF 图像来显示它是如何实时工作的。

下面是一个 .gif 图像，显示了实时使用的 explorer.fileNesting 功能

https://i.stack.imgur.com/jJQb3.gif

文件嵌套非常酷，需要注意的是，与大多数 VS Code 功能一样，它确实需要针对您的个人开发环境进行自定义配置。

就我个人而言，我发现这是对工作区范围的 settings.json 配置文件的一个很好的补充。除非您只使用 VS Code 开发相同类型的项目，使用相同的项目模板，一遍又一遍（我理解有些人这样做）我建议使用它来配置每个单独的项目。

另一种方法是按语言配置。我不这样使用它，但它对 TypeScript 的 tsc 排放非常有帮助。例如 .d.ts 文件和 *map 文件，可以将它们配置为始终嵌套在同名的 *.js 文件中。或者可以将 *.js 文件配置为嵌套在 *.ts 文件下。

上面的两个注释指出，这是一个旨在改善编译语言环境的功能，这些编译语言有一个编译器，可以发出项目构建文件；换句话说，特别是像 TypeScript 这样的“转译器”，

下面显示了一个“文件嵌套”配置，您可能会发现它写入属于 TypeScript 项目的“./.vscode/settings.json”文件。

    "explorer.fileNesting.patterns": {
          "*.ts": "${capture}.js",
          "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
          "*.mts": "${capture}.mjs, ${capture}.d.mts",
          "*.mjs": "${capture}.mjs.map, ${capture}.min.mjs, ${capture}.d.mts",
          "*.cts": "${capture}.js",
          "*.cjs": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
          "*.jsx": "${capture}.js",
          "*.tsx": "${capture}.ts",
    }

上面的配置实际上来自我的一个项目，它会导致以下行为：

https://i.stack.imgur.com/tA98y.png

我在下面提供了所有可用配置的完整列表，以及涵盖“VS 代码文件嵌套功能”的官方发行说明（早期文档形式）的链接。

截至 2022 年 6 月 17 日，以下列表包含可用于“VS Code 的文件嵌套功能”的所有配置。

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

VS CODE 关于新文件嵌套功能的官方发布说明

文件排除

注意：“文件排除，已被其他答案涵盖，所以我会简短。” “重要的是我们涵盖了 files.exclude，因为下一个功能建立在它之上。”

文件嵌套很棒，但不要排除files.exclude刚刚。将 explorer.fileNesting 和 files.exclude 等特征相互比较并不是很有帮助。实际上，最好将新的“文件嵌套”功能视为 files.exclude 的替代功能，或者作为 files.exclude 的补充功能。没有必要深入探讨使用 explorer.fileNesting 作为替代方案，所以让我们谈谈它与 files.exclude 的互补。

您可以通过多种方式使用这两个设置来配置您的项目“file-explorer” （侧栏中的文件树）。我同时使用 explorer.fileNesting 和"files.exclude"。我嵌套了某些显然有共同点的文件组。官方文档中给出的文件嵌套功能的一个常见示例是使用文件嵌套将 package-lock.json 文件隐藏在 package.json 文件下，这显然是利用文件嵌套的好方法。

但是我更进一步：我还隐藏了我的 .npmrc 文件，如果我正在编写 NPM 包，我也会隐藏我的 .npmignore 文件和包文件。

这是我创建的两个组

package.json package-lock.json .npmignore .npmrc

包-lock.json

.npmignore

.npmrc

eslintrc.json .eslintignore .prettierrc .markdownlintrc

.eslintignore

.prettierrc

.markdownlintrc

问题在于文件嵌套，你会得到一堆 1-offs，比如 .editorconfig （是的，我可以将它放在我的 .eslintrc.json 组中，但它并不真正适合他们。那么 .gitignore 呢。我想我可以将 .gitignore 留在视图中。

或者我可以使用 files.exclude，并在我的项目的 .vscode/settings.json 文件中配置我的 "files.exclude": {} 对象以隐藏 .gitignore、LICENSE、.editorconfig 等文件...

我也可以用它来隐藏目录，这是文件嵌套无法做到的。我用它来隐藏我的“build”目录和“node_modules”目录。

默认情况下，files.exclude 隐藏项目的 .git/ 目录，这就是您永远看不到它的原因。

下面是我用于 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",
  },

我在文件嵌套的新设置中编辑后稍微编辑的 Bunch 的最新功能是新的...

GitIgnore 排除功能

此功能允许您配置 VS Code 以处理 .gitignore 文件中的条目，就好像它们包含在您的 files.exclude 对象中一样。这意味着文件资源管理器实际上会解析您的 .gitignore 文件，并读取其内容，然后隐藏您配置的文件。

要将设置配置为使用 explorer.excludeGitIgnore。

请记住，此设置与其他两个功能一样，不应从以下角度考虑，

“GitIgnore Exclude”比“Files Exclude”好吗？

以这种方式思考是没有帮助的，而且会适得其反。 Git 排除（如发行说明所述）...

...与 files.exclude 一起使用以隐藏资源管理器中不需要的文件。 ~ VS Code 发行说明 v1.68

您可以在此处阅读有关 GitIgnore 排除的更多信息

---

如果您希望隐藏 node_modules 之类的内容，则可接受的答案是完美的。
如果您使用的是 Astro.js 之类的静态元框架，您将结束最多有 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直接进入亮点）。

---

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

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

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

谢谢

曼普里特·辛格

---

打开设置并搜索 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 作为例如，使用扩展名代替您想要阻止的任何内容。我希望这有帮助。

---