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

Question

Using Microsoft's Visual Studio Code, how do I hide certain files and file patterns from appearing in the sidebar?

I want to hide .meta and .git style files

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. — Katana314, May 11 '15 at 19:17
Nice tip. I also get to files that way and `command+p` (coming from a sublime background) — Chris, May 13 '15 at 00:33
Related issue about auto-hiding .gitignored files in the side bar: https://github.com/Microsoft/vscode/issues/38878 — Johan Walles, Aug 27 '18 at 11:34
I had to use **/node_modules to make it work. Just node_modules alone was not good. — Daniel Tkach, Apr 20 '21 at 17:20

score 1292 · Accepted Answer · edited May 20 '20 at 00:14

1292

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

Open VS User Settings (Main menu: File > Preferences > Settings). This will open the setting screen.
Search for files:exclude in the search at the top.
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.

edited May 20 '20 at 00:14

Florent Roques

1,312
1
14
22

answered May 09 '15 at 16:18

Benjamin Pasero

85,636
11
70
52

3

Any way to exclude sym links / aliases? – granmoe Dec 12 '16 at 20:48
4

To hide all node_modules in sub folders you could use: ```"**/node_modules/**": true``` – supNate Nov 06 '17 at 09:42
3

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 – Drenai Nov 22 '17 at 11:04
1

@becko, yes, you do have to restart your editor after changing. – Johan Walles Aug 27 '18 at 11:33
This answer would be more complete if it mentioned a way to do per project, vs globally per machine. – BBaysinger Jan 23 '19 at 21:24
5

You no longer have to restart VS Code for this to take effect. – MarredCheese Apr 04 '19 at 20:41
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: https://drive.google.com/file/d/1kz-6OZXYO1R6Ad903BPyARLlA3EOMpUQ/view?usp=sharing – Anguna Aug 11 '19 at 16:04
@Anguna Try `**/*.exe`. – Kevin Aug 21 '19 at 05:34
@Benjamin, I am getting the issue in my VS code. If you have time then can you help me out with this issue https://stackoverflow.com/questions/60665824/filename-prefix-showing-dot-and-underscore-when-open-in-visual-code-editor – Naren Verma Apr 15 '20 at 18:24
I wanted to ignore `.pyc` files and had to add `**/*.pyc` as pattern. – Krishna Oza Apr 30 '20 at 11:43
`node_modules/` didnt work for me, this works : `**/node_modules`. – selem mn Aug 19 '20 at 10:12
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. – redanimalwar Feb 03 '21 at 23:49

score 247 · Answer 2 · edited Aug 21 '16 at 02:52

247

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

edited Aug 21 '16 at 02:52

nacho4d

39,335
42
151
231

answered Mar 24 '16 at 04:13

omt66

4,015
1
19
20

10

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! – Tim Franklin Jun 07 '17 at 15:55
1

@AliMertCakar yes you can :) just add .vscode to the list – Rod911 Nov 06 '20 at 11:45
3

Thanks :) Additional info: you need to restart visual studio code to hide .vscode folder – Ali Mert Cakar Nov 09 '20 at 07:53

score 35 · Answer 3 · edited May 22 '18 at 11:16

35

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.

edited May 22 '18 at 11:16

grg

3,915
3
27
38

answered Nov 24 '17 at 08:55

Yehuda Kremer

358
4
5

2

Thanks! In my opinion, this is much preferred to manually changing this setting. – jonathanking Oct 27 '20 at 21:10
2

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 – Alexander Kucheryuk Mar 05 '21 at 01:27

score 27 · Answer 4 · answered Apr 22 '19 at 13:45

27

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

answered Apr 22 '19 at 13:45

A.J.

6,664
10
55
74

Where is this `when` syntax documented? – redanimalwar Feb 03 '21 at 23:50

score 23 · Answer 5 · answered May 04 '17 at 19:20

23

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

answered May 04 '17 at 19:20

JerkyTreats

427
5
9

5

Worked for `.pyc` files generated by *python*. – Dominic Motuka Sep 26 '17 at 08:36
4

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``` – pasevin Jul 02 '18 at 07:54
1

Your glob is unnecessarily long, it can be simplified to `"**/*.meta"` – Maximilian Burszley Jun 23 '20 at 16:55

score 22 · Answer 6 · edited Mar 06 '20 at 09:37

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.

score 4 · Answer 7 · answered Mar 07 '19 at 13:08

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

score -3 · Answer 8 · answered Jun 06 '20 at 12:18

This may not me a so good of a answer but if you first select all the files you want to access by pressing on them in the side bar, so that they pop up on top of your screen for example: script.js, index.html, style.css. Close all the files you don't need at the top.

When you're done with that you press Ctrl+B on windows and linux, i don't know what it is on mac.

But there you have it. please send no hate

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

8 Answers8

Linked

Related