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

Question

In Visual Studio Code, what setting can be configured, using file patterns, to hide files from view in the sidebar's file-explorer?

I would like to hide certain groups of files, like .meta and .git files.

Sharilyn

It's not exactly what you need, but you can at least exclude certain folders from searches by adding a "search.excludeFolders" property to your workspace settings. This was enough for me since I usually reach files by the Ctrl-E menu. – Malda

Nice tip. I also get to files that way and command+p (coming from a sublime background) – Sharilyn

Related issue about auto-hiding .gitignored files in the side bar: github.com/Microsoft/vscode/issues/38878 – Fleming

I had to use **/node_modules to make it work. Just node_modules alone was not good. – Tortola

@JohanWalles It seems have no result. – Nodarse

[shortccut comment] . . . jD3V answer has this great info, change VS code settings to use .gitignore: explorer.excludeGitIgnore – Fairing

Answer 1

You can configure patterns to hide files and folders from the explorer and searches.

1. Open VS User Settings (Main menu: File > Preferences > Settings). This will open the setting screen.
2. Search for files:exclude in the search at the top.
3. Configure the User Setting with new glob patterns as needed. In this case add this pattern node_modules/ then click OK. The pattern syntax is powerful. You can find pattern matching details under the Search Across Files topic.

When you are done it should look something like this:

If you want to directly edit the settings file: For example to hide a top level node_modules folder in your workspace:

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

To hide all files that start with ._ such as ._.DS_Store files found on OSX:

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

You also have the ability to change Workspace Settings (Main menu: File > Preferences > Workspace Settings). Workspace settings will create a .vscode/settings.json file in your current workspace and will only be applied to that workspace. User Settings will be applied globally to any instance of VS Code you open, but they won't override Workspace Settings if present. Read more on customizing User and Workspace Settings.

Martguerita

Any way to exclude sym links / aliases? – Shoulders

To hide all node_modules in sub folders you could use: "**/node_modules/**": true – Sachsse

In the later VSCode versions (Nov 2017) you use File>Preferences>Settings and use the dropdown on top right to select UserSettings or Workspace. Selecting Workspace will then create the .vscode folder and settings.json in your project – Purificator

@becko, yes, you do have to restart your editor after changing. – Fleming

This answer would be more complete if it mentioned a way to do per project, vs globally per machine. – Carrel

You no longer have to restart VS Code for this to take effect. – Thirion

Anyone know why this isn't working? I am trying to hide .exe files in a directory of my workspace but it isn't working. Here is an image: drive.google.com/file/d/1kz-6OZXYO1R6Ad903BPyARLlA3EOMpUQ/… – Denbrook

@Denbrook Try **/*.exe. – Denitrify

I wanted to ignore .pyc files and had to add **/*.pyc as pattern. – Dreadnought

node_modules/ didnt work for me, this works : **/node_modules. – Fenugreek

Is there a way to exclude all but certain files? Like gitignores work or something like that. And no, I do not want to hide all file that I have in .gitignore grayed out is fine but for one folder I want to manually define what to show. – Colum

After compiling any cpp file first time in vscode, it generates another file with the same name but with no extension. I run many cpp files and after running them I always see many duplicate files with no extension. How to hide these files with no extension? – Arias

Answer 2

Sometimes you just want to hide certain file types for a specific project. In that case, you can create a folder in your project folder called .vscode and create the settings.json file in there, (i.e. .vscode/settings.json). All settings within that file will affect your current workspace only.

For example, in a TypeScript project, this is what I have used:

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

Boys

VS Code now has a tab when you go to Preferences > Settings where you can switch between User Settings and Workspace Settings, so you don't have to manually create the file yourself anymore. Great example on excluding file types--thanks! – Blinkers

@AliMertCakar yes you can :) just add .vscode to the list – Andaman

Thanks :) Additional info: you need to restart visual studio code to hide .vscode folder – Profanity

Do not mix project and workspace, they are different. Workspace has one to several projects and a project belongs to one workspace. So your settings file will affect one project. – Endurable

Answer 3

The "Make Hidden" extension works great!

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.

Hypocrisy

Thanks! In my opinion, this is much preferred to manually changing this setting. – Philip

Imho, this is the best answer if you are looking to just hide files/folders in the directory tree without side affects such as affecting search or go to file – Bile

Sadly it no longer works. I suspect it's more a problem with vscode's instability than the extension developer. – Carolanncarole

Answer 4

The __pycache__ folder and *.pyc files are totally unnecessary to the developer. To hide these files from the explorer view, we need to edit the settings.json for VSCode. Add the folder and the files as shown below:

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

Paragraphia

Where is this when syntax documented? – Colum

@Colum code.visualstudio.com/api/references/when-clause-contexts – Resect

From VSCode Intelisense: "Files with Siblings by Name: Additional check on the siblings of a matching file. Use $(basename) as variable for the matching file name." { "when": "$(basename).extension" } – Resect

Answer 5

I would also like to recommend vscode extension Peep, which allows you to toggle hide on the excluded files in your projects settings.json.

Hit F1 for vscode command line (command palette), then

ext install [enter] peep [enter]

You can bind "extension.peepToggle" to a key like Ctrl+Shift+P (same as F1 by default) for easy toggling. Hit Ctrl+K Ctrl+S for key bindings, enter peep, select Peep Toggle and add your binding.

Voluntaryism

Answer 6

For .meta files while using Unity3D, I found the best pattern for hiding is:

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

This captures all folders and subfolders, and will pick up foo.cs.meta in addition to foo.meta

Luxe

Worked for .pyc files generated by python. – Slaty

It works, but then the global search stops working with error: Error parsing glob ... invalid use of **; must be one path component, should be "*/**/*.meta": true – Rebekahrebekkah

Your glob is unnecessarily long, it can be simplified to "**/*.meta" – Taggart

Answer 7

2022 New File-explorer Features

There are a couple very cool new features that let devs configure the files that show in the sidebar, as well as offering new ways of hiding files, while keeping them accessible.

This answer covers

1. "explorer.fileNesting" (NEW as of April-2022)

2. "files.exclude"

3. explorer.excludeGitIgnore (new as of June-2022)

File Excludes

So the best answer included in this post, originally, was the "files.exclude"

---

VS Code's File Nesting Feature

Because "File Nesting" is IMO one of the coolest features added to VS Code in recent releases, I thought I'd take the time to create a animated GIF-image that shows how it works in real-time.

Below is a .gif image that shows the explorer.fileNesting feature being used in Real-time

File nesting is very cool, it is important to note, like most VS Code features, it does need to be custom configured for your personal development environment.

• Personally I find this is a good addition for the workspace scoped settings.json configuration file. Unless you only ever use VS Code for developing the same type of projects, using the same project template, over & over again (which I understand some people do) I suggest using it to configure each individual project.

• An alternative is per-language configuration. I don't use it this way, but it is very helpful with TypeScript's tsc emissions. For Example .d.ts files & *map files, they can configured to always be nested into *.js files, with the same name. Or the *.js files can be configured to nest under the *.ts files.

The above two notes point out that this is a feature aimed at improving the environment for compiled languages that have a compiler that emits project-build files; and specifically "transpilers" like TypeScript in other words,

Below shows a "File Nesting" configuration that you'll likely find written to "./.vscode/settings.json" file that belongs to a TypeScript project.

    "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",
    }

The above configuration is actually from one of my projects, and it results in the following behavior:

I have included below, a complete list of All available configurations, as well as the link to the official release-notes (early form of documentation) that covers the "VS Code File-nesting Feature".

As of 2022-06-17 the following list contains all configurations available for "VS Code's File Nesting Feature".

1. explorer.fileNesting.enabled

   • Controls whether file nesting is enabled at-large. It can be set either globally or for a specific workspace.

2. explorer.fileNesting.expand

   • Controls whether nested files are expanded by default.

3. explorer.fileNesting.patterns

   • Controls how files are nested. The default configuration provides nesting intelligence for TypeScript and JavaScript projects, but you're encouraged to modify this to fit your own project's structure. Some examples:

• VS CODE'S OFFICIAL RELEASE NOTES ON THE NEW FILE NESTING FEATURE

---

File Excludes

---

NOTE: "File excludes, has been covered by other answers so I will be brief."

"It's important we cover files.exclude though, as the next feature builds on it."

File-nesting is awesome, but don't exclude files.exclude Just yet. Comparing features like explorer.fileNesting, and files.exclude against each-other is not very helpful. It is actually best to look at the new "File Nesting" feature as either an alternative to files.exclude, or as a complementing feature to files.exclude. There's no need to go indepth about using explorer.fileNesting as an alternative, so lets talk a bit about it complimenting files.exclude.

There are several ways you can use the two settings to configure your projects "file-explorer" (the file-tree in the side-bar). I use both explorer.fileNesting & "files.exclude". I nest certain groups of files that obviously share somthing in common. A common example given in the official docs for the file nesting feature is using file nesting to hide your package-lock.json file under your package.json file, which is obviously a great way to make use of file nesting.

However I take it a step further: I also hide my .npmrc file, and if I am writing an NPM-Package, I hide my .npmignore file with the package files too.

Here are two groups I create

• package.json

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

• eslintrc.json

  • .eslintignore
  • .prettierrc
  • .markdownlintrc

The problem is with file nesting, you get a bunch of 1-offs, like .editorconfig (ya I can place it with my .eslintrc.json group, but it doesn't really fit their. And what about .gitignore. I suppose I could just leave .gitignore in the view.

Or I could use files.exclude, and configure my "files.exclude": {} object in my project's .vscode/settings.json file to hide files like .gitignore, LICENSE, .editorconfig, etc...

I can also use it to hide directorys this is somthing File Nesting cannot do. I use it to hide my "build" dir & "node_modules" dir.

By default, files.exclude hides project's .git/ directory, which is why you never see it.

Below is the default configuration I use for ESM NodeJS TypeScript projects, which is what most of my projects are. The configuration is generic, and changes from project to project.

  "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",
  },

The Latest Feature of the Bunch, Which I Edited in a bit after editing in File Nesting's new settings, is the new...

GitIgnore Exclude Feature

This feature allows you to configure VS Code to treat entries in your .gitignore file, as if they were included in your files.exclude object. The means that the File Explorer actually parses your .gitignore file, and reads its contents, then hides the files you configure it too.

To configure the setting to on use explorer.excludeGitIgnore.

Remember, this setting, like the other two features, should not be thought of from a perspective of,

"Is "GitIgnore Exclude" better than "Files Exclude"?

Its unhelpful, and counter productive to think in this way. Git Excludes (as the release notes say)...

...works alongside files.exclude to hide unwanted files from the Explorer.        ~ VS Code Release Notes v1.68

• You can read more about GitIgnore Excludes Here

---

Rudolf

How to make it work with directories? – Mucor

@Mucor Sorry I am so late getting back to you Simeon. You cannot get fileNesting to work with directories, but you can now use "GitIgnore Exclude" to help with that. Read the new answer I just posted. It includes a whole bunch about the new exclude feature released in the latest v1.68 release of VS Code. – Courson

Answer 8

If you're using VSCode:

• File > Preferences > Settings
• Search for:

files:exclude

• Then add

**/node_modules

• Click OK.

You shouldn't need to restart or reload VSCode to take effect

Racial

I also search for '.gitignore' in the settings and find "Explorer: Exclude GitIgnore", "Search: Use Ignore Files" and a couple more. – Happenstance

Answer 9

If your working on a Angular 2+ application, and like me you like a clean working environment, follow @omt66 answer and paste the below in your settings.json file. I recommend you do this once all the initial setup has been completed.

Note: This will actually hide the .vscode folder (with settings.json) in as well. (Open in your native file explorer / text editor if you need to make changes afterwards)

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
  }
}

Correlative

Answer 10

To hide certain files from VSCode Explorer, go to the following steps.

1. Go to settings
2. Type Exclude files
3. Add **/*.meta and save it.

Defrock

Answer 11

To hide pycache add **/__pycache__ to the Exclude section in settings:

Nanaam

Answer 12

The accepted answer is perfect if you're looking to hide something like node_modules.
In the case you're working with a static meta-framework like Astro.js, you'll end up with index.astro files but also get a lot of noise because of dist/test/index.html or /dist/about-page/index.html etc... pages.

To exclude them from the command palette search but still be able to inspect the dist folder in your files tree, I recommend using the following in a .vscode/settings.json file

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

That way, you still keep it visible while not having it polluting your ctrl + p search.

---

PS: more info can be found here (submit the URL again after opening it to go to the highlight directly).

Cohen

IDK, if this is of help to you, but your answer caused this question to pop up at the top of my feed, and I wanted to include a new feature that VSCode released with this question. U can see it below. – Courson

Answer 13

I had the same problem in the past as I was looking to remove the .class files generated after we suceessfully run .java files so .class files are created automatically after compilation and .exe files are created after compiling C or C++ code.

The most simple method to do this is to change your workspace settings by pressing F1 and selecting Preferences: Open Workspace Settings from the popup. After that scroll to the Files: Exclude row and add a tag - **/*.class in the list and now the .class files will not be shown in the Vscode Project File Explorer.

You can do the same method to remove .exe files by using the tag **/*.exe for C & C++ files.

Thanks

Manpreet Singh

Funke

Answer 14

Open Settings and search for Files.Exclude then click on add pattern then it will give a notification Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again. Now open that settings.json file and search for files.exclude{ } block and include "**/*.exe": true Here I use .exe as example, Instead of that use the extension whatever you want to block. I hope this helps.

Fricke