如何在 Visual Studio Code 的側邊欄中隱藏某些文件？

Question

在Visual Studio Code中，可以使用文件模式配置什么設置，以在側邊欄的文件資源管理器中隱藏文件？

我想隱藏某些文件組，例如.meta和.git文件。

Answer 1

您可以配置模式以在資源管理器和搜索中隱藏文件和文件夾。

1. 打開 VS 用戶設置（主菜單： File > Preferences > Settings ）。 這將打開設置屏幕。
2. 搜索files:exclude在頂部的搜索中files:exclude 。
3. 根據需要使用新的 glob 模式配置用戶設置。 在這種情況下，添加此模式node_modules/然后單擊確定。 模式語法很強大。 您可以在Search Across Files 主題下找到模式匹配的詳細信息。

完成后，它應該如下所示：

如果要直接編輯設置文件：例如在工作區中隱藏頂級 node_modules 文件夾：

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

要隱藏所有以._文件，例如在 OSX 上找到的._.DS_Store文件：

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

您還可以更改工作區設置（主菜單： File > Preferences > Workspace Settings ）。 工作區設置將在您當前的工作區中創建一個.vscode/settings.json文件，並且只會應用於該工作區。 用戶設置將全局應用於您打開的任何 VS Code 實例，但它們不會覆蓋工作區設置（如果存在）。 閱讀有關自定義用戶和工作區設置的更多信息。

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

“ Make Hidden ”擴展效果很好！

通過啟用允許您輕松執行隱藏/顯示操作的上下文菜單、查看隱藏項目的視圖窗格資源管理器以及保存工作區以在批量隱藏項目之間快速切換的能力，使隱藏提供對項目目錄的更多控制。

Answer 4

__pycache__文件夾和*.pyc文件對於開發者來說是完全不需要的。 要在資源管理器視圖中隱藏這些文件，我們需要編輯 VSCode 的 settings.json。 添加文件夾和文件，如下所示：

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

Answer 5

我還想推薦 vscode 擴展Peep ，它允許您在項目 settings.json 中的排除文件上切換隱藏。

在 vscode 命令行（命令面板）中按F1 ，然后

ext install [enter] peep [enter]

您可以將“extension.peepToggle”綁定到Ctrl + Shift + P （默認與F1相同）之類的鍵，以便於切換。 按 Ctrl + K Ctrl + S鍵綁定，輸入peep ，選擇 Peep Toggle 並添加您的綁定。

Answer 6

對於使用 Unity3D 時的.meta文件，我發現最好的隱藏模式是：

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

這捕獲所有文件夾和子文件夾，並會拿起foo.cs.meta除了foo.meta

Answer 7

如果您使用的是 VSCode：

• 文件 > 首選項 > 設置
• 搜索：

files:exclude

• 然后加

**/node_modules

• 單擊OK 。

您不需要重新啟動或重新加載 VSCode 即可生效

Answer 8

2022 新的文件瀏覽器功能

有幾個非常酷的新功能可以讓開發人員配置側邊欄中顯示的文件，並提供隱藏文件的新方法，同時保持它們的可訪問性。

這個答案涵蓋

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

2. "files.exclude"

3. explorer.excludeGitIgnore （2022 年 6 月新增）

文件排除

所以這篇文章中包含的最佳答案最初是"files.exclude"

---

VS Code 的文件嵌套功能

因為“文件嵌套”是IMO在最近版本中添加到 VS Code 的最酷的功能之一，我想我會花時間創建一個動畫 GIF 圖像來顯示它是如何實時工作的。

下面是一個.gif圖像，顯示了實時使用的explorer.fileNesting功能

文件嵌套非常酷，需要注意的是，與大多數 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",
    }

上面的配置實際上來自我的一個項目，它導致了以下行為：

我在下面包含了所有可用配置的完整列表，以及指向涵蓋“VS 代碼文件嵌套功能”的官方發行說明（文檔的早期形式）的鏈接。

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

1. explorer.fileNesting.enabled

   • 控制是否啟用文件嵌套。 它可以全局設置或為特定工作區設置。

2. explorer.fileNesting.expand

   • 控制嵌套文件是否默認展開。

3. explorer.fileNesting.patterns

   • 控制文件的嵌套方式。 默認配置為 TypeScript 和 JavaScript 項目提供嵌套智能，但我們鼓勵您修改它以適應您自己項目的結構。 一些例子：

• VS Code 關於新文件嵌套功能的官方發布說明

---

文件排除

---

注意： “文件不包括，已被其他答案涵蓋，所以我會很簡短。”

“重要的是我們涵蓋files.exclude ，因為下一個功能是建立在它之上的。”

文件嵌套很棒，但不要排除files.exclude就可以了。 將explorer.fileNesting和files.exclude等功能相互比較並不是很有幫助。 實際上，最好將新的“文件嵌套”功能視為 files.exclude 的替代功能，或作為files.exclude的補充功能。 沒有必要 go 深入了解使用explorer.fileNesting作為替代方案，所以讓我們談談它對files.exclude的贊美。

您可以通過多種方式使用這兩個設置來配置您的項目“文件資源管理器” （邊欄中的文件樹） 。 我同時使用 explorer.fileNesting 和"files.exclude" 。 我嵌套了某些明顯共享某些共同點的文件組。 官方文檔中給出的文件嵌套功能的一個常見示例是使用文件嵌套將package-lock.json文件隱藏在package.json文件下，這顯然是利用文件嵌套的好方法。

但是，我更進一步：我還隱藏了 my.npmrc 文件，如果我正在編寫 NPM 包，我也將 my.npmignore 文件與 package 文件一起隱藏。

這是我創建的兩個組

• package.json

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

• eslintrc.json

  • .eslintignore
  • .prettierrc
  • .markdownlintrc

問題在於文件嵌套，你會得到一堆 1-offs，比如 .editorconfig（是的，我可以將它放在我的.eslintrc.json組中，但它並不適合他們。那么 .gitignore 呢。我想我可以將.gitignore留在視圖中。

或者我可以使用files.exclude ，並在我項目的.vscode/settings.json文件中配置我的"files.exclude": {} object 來隱藏.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 代碼發行說明v1.68

• 您可以在此處閱讀有關 GitIgnore Excludes 的更多信息

---

Answer 9

如果您在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 10

如果你想隱藏像node_modules這樣的東西，那么接受的答案是完美的。
如果你正在使用像 Astro.js 這樣的 static 元框架，你最終會得到index.astro文件，但由於dist/test/index.html或/dist/about-page/index.html等...頁面。

要將它們從命令面板搜索中排除，但仍然能夠檢查文件樹中的dist文件夾，我建議在.vscode/settings.json文件中使用以下內容

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

這樣，您仍然可以保持它可見，同時不會污染您的ctrl + p搜索。

---

PS：更多信息可以在這里找到（URL打開后再次提交到go直接高亮）。

Answer 11

我過去遇到過同樣的問題，因為我想刪除我們成功運行后生成的.class文件。java文件因此.class文件是在編譯后自動創建的，.exe文件是在編譯C或C++代碼后創建的。

執行此操作的最簡單方法是通過按F1並從彈出窗口中選擇Preferences: Open Workspace Settings設置來更改工作區設置。 之后滾動到Files: Exclude行並在列表中添加標簽 - **/*.class ，現在 .class 文件將不會顯示在 Vscode 項目文件資源管理器中。

對於 C 和 C++ 文件，您可以使用標記**/*.exe執行相同的方法來刪除 .exe 文件。

謝謝

曼普利特·辛格

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. 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 作為示例，而不是使用你想要阻止的擴展名。 我希望這有幫助。

Answer 13

這可能不是一個很好的答案，但是如果您首先通過在側欄中按它們來選擇要訪問的所有文件，以便它們彈出您的屏幕頂部，例如：script.js、index.js、 html，style.css。 在頂部關閉所有不需要的文件。

完成后，在 Windows 和 linux 上按 Ctrl+B，我不知道它在 mac 上是什么。

但是你現在有了。 請不要發送仇恨