How to exclude folder from "Explore" tab?

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?

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.

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.

GUI way

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

Code way

1. 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:

2. 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.

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

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.

---

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

1. Open Settings (command-P).

2. Select the Workspace Tab.

3. 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".

4. 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.

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

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.

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

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.