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

Question

使用Microsoft的Visual Studio代码,如何隐藏侧边栏中显示的某些文件和文件模式？

我想隐藏.meta和设置.git文件样式

Answer 1

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

1. 打开VS用户设置(主菜单:文件>首选项>设置).这将打开设置屏幕.
2. 搜索文件:在顶部的搜索中排除.
3. 根据需要使用新的glob模式配置用户设置.在这种情况下,添加此模式,node_modules/然后单击确定.模式语法很强大.您可以在" 搜索跨文件"主题下找到模式匹配详细信息.

当你完成它应该看起来像这样:

如果要直接编辑设置文件:例如,要隐藏工作区中的顶级node_modules文件夹:

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

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

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

您还可以更改工作区设置(主菜单:文件>首选项>工作区设置).工作区设置将.vscode/settings.json在当前工作空间中创建文件,并且仅应用于该工作空间.用户设置将全局应用于您打开的任何VS代码实例,但如果存在,它们将不会覆盖工作区设置.阅读有关自定义用户和工作区设置的更多信息.

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

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

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

这捕获所有文件夹和子文件夹,并拿起foo.cs.meta除了foo.meta

Answer 4

\n
\n

2022 年文件浏览器新功能

\n

有一些非常酷的新功能，可以让开发人员配置侧边栏中显示的文件，并提供隐藏文件的新方法，同时保持文件可访问性。

\n

这个答案涵盖了

\n

\n

1. "explorer.fileNesting"（截至 2022 年 4 月新）

   \n
\n

2. "files.exclude"

   \n
\n

3. explorer.excludeGitIgnore（截至 2022 年 6 月新）

   \n
\n

\n

文件排除

\n

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

\n\n

\n

VS Code 的文件嵌套功能

\n

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

\n

下.gif图显示了explorer.fileNesting实时中使用的功能

\n

\n

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

\n

\n

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

  \n
\n

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

  \n
\n

\n

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

\n

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

\n

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

\n

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

\n

\n
\n

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

\n

以下 2022-06-17 列表包含可用于“VS Code 的文件嵌套功能”的所有配置。

\n

\n

1. explorer.fileNesting.enabled

   \n
   \n
   • 控制是否启用大文件嵌套。它可以全局设置，也可以针对特定工作区设置。
   \n
   \n
\n

2. explorer.fileNesting.expand

   \n
   \n
   • 控制默认情况下是否展开嵌套文件。
   \n
   \n
\n

3. explorer.fileNesting.patterns

   \n
   \n
   • 控制文件的嵌套方式。默认配置为 TypeScript 和 JavaScript 项目提供嵌套智能，但我们鼓励您修改此配置以适合您自己的项目结构。一些例子：
   \n
   \n
\n

\n
\n

\n

• VS Code 关于新文件嵌套功能的官方发行说明

  \n
\n

\n
\n
\n
\n\n

文件排除

\n\n

\n

注意：“文件排除，已被其他答案涵盖，所以我会简短地说。”

\n

“不过，我们要介绍的内容很重要files.exclude，因为下一个功能将以此为基础。”

\n

\n

files.exclude文件嵌套很棒，但还不要排除。explorer.fileNesting将、 和功能files.exclude相互比较并不是很有帮助。实际上，最好将新的“文件嵌套”功能视为 files.exclude 的替代功能，或作为files.exclude. 没有必要深入探讨如何使用它explorer.fileNesting作为替代方案，所以我们来谈谈它的赞美files.exclude。

\n

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

\n

不过，我更进一步：我还隐藏了 .npmrc 文件，如果我正在编写 NPM 包，我也会将 .npmignore 文件与包文件一起隐藏。

\n

这是我创建的两个组

\n

\n

• package.json

  \n
  \n
  • package-lock.json
  \n
  • .npmignore
  \n
  • .npmrc
  \n
  \n
\n

• eslintrc.json

  \n
  \n
  • .eslintignore
  \n
  • .prettierrc
  \n
  • .markdownlintrc
  \n
  \n
\n

\n

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

\n

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

\n

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

\n

默认情况下，files.exclude隐藏项目的.git/目录，这就是为什么你永远看不到它。

\n

以下是我用于 ESM NodeJS TypeScript 项目的默认配置，这是我的大多数项目的配置。配置是通用的，并且随着项目的不同而变化。

\n

  "files.exclude": {\n    // -------- PROJECT DIRECTORIES --------\n    "**/.git/": true,\n    "node_modules/": true,\n    "out/": true,\n    "typings/": true,\n\n    // ------- PROJECT FILES -------\n    "LICENSE": true,\n    "README.md": true\n  },\n\n  "explorer.fileNesting.patterns": {\n    "*.ts": "${capture}.js",\n    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",\n    "*.jsx": "${capture}.js",\n    "*.tsx": "${capture}.ts",\n    ".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",\n    "tsconfig.json": "tsconfig.*.json, package.json, .gitignore",\n  },\n

\n
\n
\n
\n

这一系列的最新功能是我在文件嵌套的新设置中编辑后编辑的，它是新的...

\n

GitIgnore 排除功能

\n

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

\n

将设置配置为“使用” explorer.excludeGitIgnore。

\n

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

\n

\n

““GitIgnore 排除”比“文件排除”更好吗？

\n

\n

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

\n

\n

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

\n

\n
\n

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

\n
\n\n

Answer 5

" Make Hidden "扩展功能非常棒!

通过启用允许您轻松执行隐藏/显示操作的上下文菜单,使用视图窗格浏览器查看隐藏项目以及保存工作区以在批量隐藏项目之间快速切换的功能,"隐藏"可以更好地控制项目目录.

Answer 6

如果您使用的是 VSCode：

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

files:exclude

• 然后加

**/node_modules

• 点击OK。

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

Answer 7

我还想推荐使用vscode扩展Peep,它允许您在项目settings.json中的被排除文件上切换隐藏.

然后按F1键查看vscode命令行(命令调色板)

ext install [enter] peep [enter]

您可以将"extension.peepToggle"绑定到一个键,如Ctrl + Shift + P(默认情况下与F1相同),以便轻松切换.按Ctrl + K Ctrl + S进行键绑定,输入peep,选择Peep Toggle并添加绑定.

Answer 8

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

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