How to exclude folder from "Explore" tab?

Question

I'm trying to exclude several folders on the Explore tab in Visual Studio Code. To do that, I have added a following jsconfig.json to the root of my project:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}

But the node_modules folder is still visible in the directory tree.

What am I doing wrong? Are there any other options?

It seems most answers are suggesting to change this configuration in _Workspace Settings_. However, I don't need `node_modules` to show up on _any_ project. So I would set it globally in **User Settings** instead. — ADTC, Sep 09 '21 at 08:15

score 696 · Accepted Answer · edited Apr 22 '21 at 01:43

696

Use files.exclude:

Go to File -> Preferences -> Settings (or on Mac Code -> Preferences -> Settings)
Pick the workspace settings tab
Add this code to the settings.json file displayed on the right side:

    // Place your settings in this file to overwrite default and user settings.

    {
        "settings": {
            "files.exclude": {
                "**/.git": true,         // this is a default value
                "**/.DS_Store": true,    // this is a default value
    
                "**/node_modules": true, // this excludes all folders 
                                        // named "node_modules" from 
                                        // the explore tree
    
                // alternative version
                "node_modules": true    // this excludes the folder 
                                        // only from the root of
                                        // your workspace 
            }
        }
    }

If you chose File -> Preferences -> User Settings then you configure the exclude folders globally for your current user.

edited Apr 22 '21 at 01:43

luiscla27

4,956
37
49

answered Oct 22 '15 at 09:33

Wosi

41,986
17
75
82

18

Just if somebody wonders: A trailing slash isn't helping (nor harming) in limiting the exclude to Folders only. i.e. `"**/BACKUP/": true` is just as good/bad as without the last slash. – Frank N Feb 19 '17 at 08:13
The value you provide on the RHS appears to be merged with the value on the LHS. Presumably one would have to copy the value from the LHS and set it to `false` to overwrite the default values. – roganartu Mar 20 '17 at 05:33
Correction: It should be "**/node_modules": true – Shekhar Kumar Jun 06 '17 at 11:33
2

How does inheritance work here? Do I have to list *all* excludes or just the ones not listed in user settings? – Robert Jeppesen Jun 13 '17 at 07:10
The second comment is more useful than the accepted answer. It introduces `search.exclude`. which actually allows you to see files with vital info such as packages and versions, but stops useless search results. – Hans Oct 03 '17 at 16:02
9

It's worth noting that in the current version of Code (1.28.2), the `files.exclude` key belongs **inside** the `settings` key of the `code-workspace` file. – Tom Oct 29 '18 at 17:55
What would be the patter to exclude all subfolders? – Danijel Dec 05 '18 at 10:52
I want to exclude all files/folders from `.gitignore`. What to do? – Muhammad Qasim Sep 27 '19 at 06:48
.. with current VS Code versions, using CTRL+SHIFT+P and then entering `Preferences: Configure Language Specific Settings` will get you to the text version of `settings.json` view directly (otherwise, settings is shown as interface fields by default) – Alex Jan 30 '20 at 08:13
how can we check in these settings per project, without checking in the .vscode folder (whihc does not seem to be a good idea)? – dashesy Mar 31 '20 at 22:49
1

As of version 1.44.2 this doesn't seem to work anymore. The second answer has the correct syntax. Full syntax of settings.json with default values can be found here: https://code.visualstudio.com/docs/getstarted/settings#_default-settings – user202472 Jun 17 '20 at 22:41
Has anyone succeeded to make the root only version (ie "node_modules": true) work? – agemO Jul 30 '20 at 10:24
the outmost brackets should not be there – younes zeboudj Aug 31 '22 at 16:24
files.exclude didn't work inside a settings object for me. Instead, using files.exclude at the top level worked. – James0r Mar 30 '23 at 18:38

totymedli · Answer 2 · 2022-05-04T08:08:46.093

GUI way

Go to "File -> Preferences -> Settings" (or press Ctrl + ,) then:
Type "exclude" to the search bar.
Select the "Workspace" tab if you want this change to only effect your current project instead of each one.
Click the "Add Pattern" button.

Code way

To open the settings.json file:
- Press Ctrl + Shift + P or Cmd + Shift + P on Mac, then type "Open Workspace Settings (JSON)".
- OR, on older versions you can click the little {} icon at the top right corner of the GUI tab:

Add excluded folders to files.exclude. Also check out search.exclude and files.watcherExclude as they might be useful too. This snippet contains their explanations and defaults:

 {
   // Configure glob patterns for excluding files and folders. 
   // For example, the files explorer decides which files and folders to show 
   // or hide based on this setting. 
   // Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
     "**/.hg": true,
     "**/CVS": true,
     "**/.DS_Store": true
   },
   // Configure glob patterns for excluding files and folders in searches. 
   // Inherits all glob patterns from the `files.exclude` setting.   
   // Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true
   },
   // Configure glob patterns of file paths to exclude from file watching. 
   // Patterns must match on absolute paths 
   // (i.e. prefix with ** or the full path to match properly). 
   // Changing this setting requires a restart. 
   // When you experience Code consuming lots of cpu time on startup, 
   // you can exclude large folders to reduce the initial load.
   "files.watcherExclude": {
     "**/.git/objects/**": true,
     "**/.git/subtree-cache/**": true,
     "**/node_modules/*/**": true
   }
 }

For more details on the other settings, see the official settings.json reference.

omg, `watcherExclude` may be just what I need to deal with major lag due to watching bazel autogenerated files... thanks so much for this! — jess, Jul 18 '22 at 15:50

score 117 · Answer 3 · answered May 16 '17 at 13:56

117

In newer versions of VS Code, you navigate to settings (Ctrl+,), and make sure to select Workspace Settings at the top right.

Then add a files.exclude option to specify patterns to exclude.

You can also add search.exclude if you only want to exclude a file from search results, and not from the folder explorer.

answered May 16 '17 at 13:56

Drew Noakes

300,895
165
679
742

9

Exclude from search while still being able to browse files in the explorer - exactly what I needed, thanks! – davnicwil Jul 14 '17 at 12:17
1

Thanks for specifying `Workspace Settings` – JJS Jun 12 '18 at 11:53
4

I had to place `files.exclude` inside `settings:{ ... }` when applying it to the *workspace settings* ([.code-workspace](https://code.visualstudio.com/docs/editor/multi-root-workspaces) file) otherwise it complained on the lines of the property being unknown. There was a _third_ "Folder settings" tab (.vscode/settings.json) in which it worked in the outermost braces. – PAT Jul 02 '18 at 19:08
Here is an extension if you want to easily [toggle the excluded files](https://marketplace.visualstudio.com/items?itemName=amodio.toggle-excluded-files) – Paul Jun 01 '22 at 14:48

score 17 · Answer 4 · edited Apr 22 '21 at 01:44

17

In version 1.28 of Visual Studio Code "files.exclude" must be placed within a settings node.

Resulting in a workspace file that looks like:

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

edited Apr 22 '21 at 01:44

luiscla27

4,956
37
49

answered Nov 07 '18 at 09:43

Nisd

1,068
9
19

score 5 · Answer 5 · answered Dec 23 '19 at 18:49

There's this Explorer Exclude extension that exactly does this. https://marketplace.visualstudio.com/items?itemName=RedVanWorkshop.explorer-exclude-vscode-extension

It adds an option to hide current folder/file to the right click menu. It also adds a vertical tab Hidden Items to explorer menu where you can see currently hidden files & folders and can toggle them easily.

score 4 · Answer 6 · answered Sep 07 '21 at 22:02

Here's an answer using Visual Studio Code on Mac in 2021. I am using Code v1.60.

Open Settings (command-P).
Select the Workspace Tab.

Use the Settings search bar to search for "exclude". Then look for the section that says "Files: Exclude". Click on the blue button that says "Add Pattern".

A new text field will appear. Add the name of the directory that you want excluded. If the directory is named excluded_directory, then type in **/excluded_directory. Click on OK.

score 3 · Answer 7 · edited Apr 22 '21 at 01:45

3

In newer versions of VSCode this moved to a folder-specific configuration block.

Go to File -> Preferences -> Settings (or on Mac Code -> Preferences -> Settings)
Pick the Folder Settings tab

Then add a "files.exclude" block, listing the directory globs you would like to exclude:

{
    "files.exclude": {
        "**/bin": true,
        "**/obj": true
    },
}

edited Apr 22 '21 at 01:45

luiscla27

4,956
37
49

answered Feb 27 '18 at 04:16

moof2k

1,678
1
17
19

score 1 · Answer 8 · edited Apr 22 '21 at 01:44

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.

    {
       "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,
        "**/*.pyc": true,
        "**/__pycache__/": true
      }
    }

score 0 · Answer 9 · answered Oct 23 '22 at 14:19

0

If those files are defined at .gitignore you can exclude them by:

File -> Preferences -> Settings (or on Mac Code -> Preferences -> Settings)
Features -> Search -> check Use Ignore files

answered Oct 23 '22 at 14:19

Yinon Ehrlich

586
6
14

score 0 · Answer 10 · answered Jul 12 '23 at 09:27

0

To avoid duplicities you can just use the .gitignore file and use property in settings.json:

"explorer.excludeGitIgnore":true

You can find it in Settings, I recommend using the settings only for the Workspace

enter image description here

answered Jul 12 '23 at 09:27

Czechdude

142
3
10

score -15 · Answer 11 · edited Nov 03 '17 at 08:55

-15

I managed to remove the errors by disabling the validations:

{
    "javascript.validate.enable": false,
    "html.validate.styles": false,
    "html.validate.scripts": false,
    "css.validate": false,
    "scss.validate": false
}

Obs: My project is a PWA using StyledComponents, React, Flow, Eslint and Prettier.

edited Nov 03 '17 at 08:55

Display Name

4,502
2
47
63

answered Oct 09 '17 at 13:28

Rafael Santos Sá

21
1
3

10

This doesn't answer the OP's question at all. – JoeMoe1984 Jan 29 '18 at 19:39

How to exclude folder from "Explore" tab?

11 Answers11

GUI way

Code way

Linked

Related