How can I hide specified files/directories (e.g., .git) in the sidebar? (Visual Studio Code)

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

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 file for Visual Studio Code. Add the folder and the files as shown below:

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

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.

2022 New File-explorer Features

There are a couple of very cool new features that let developers 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"

Visual Studio Code's File Nesting Feature

Because "File Nesting" is IMO one of the coolest features added to Visual Studio 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 Visual Studio 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 Visual Studio 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 and 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,

The below shows a "File Nesting" configuration that you'll likely find written to the ./.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 Visual Studio Code file-nesting feature.

As of 2022-06-17, the following list contains all configurations available for Visual Studio 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:

• Visual Studio 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 in depth about using explorer.fileNesting as an alternative, so let’s talk a bit about it complementing 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 and "files.exclude". I nest certain groups of files that obviously share something in common. A common example given in the official documentation 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 one-offs, like .editorconfig (yeah, I can place it with my .eslintrc.json group, but it doesn't really fit there. 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 directories. This is something file nesting cannot do. I use it to hide my "build" directory and "node_modules" directory.

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 Node.js 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 Visual Studio 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, and 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"?

It’s unhelpful, and counterproductive to think in this way. Git excludes (as the release notes say)...

...works alongside files.exclude to hide unwanted files from the Explorer.        ~ Visual Studio Code release notes v1.68

• You can read more about GitIgnore excludes here

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

Hit F1 for Visual Studio Code 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.

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

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

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

If you're using Visual Studio Code:

• Menu File → Preferences → Settings

• Search for:

  files:exclude

• Then add

  **/node_modules

• Click OK.

You shouldn't need to restart or reload Visual Studio Code to make it take effect.

If you’re working on a Angular 2+ application, and like me you like a clean working environment, follow omt66's 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
  }
}

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.

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

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, you'll end up with index.astro files, but you 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 information can be found here (submit the URL again after opening it to go to the highlight directly).

I had the same problem in the past as I was looking to remove the .class files generated after we successfully 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 Visual Studio Code Project File Explorer.

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

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

hides meta files in all. (for unity coders)
ticked as answer is not correct.
"**/.meta": true
he forgot an asterix wildcard. (we were call it wildcards in 80s)

Open Settings and search for Files.Exclude. Then click on add pattern. 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 an example. Instead of that, use the extension whatever you want to block.