[visual-studio-code] How can I exclude a directory from Visual Studio Code "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?

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

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.

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.

tl;dr

1. Press Ctrl + Shift + P or Command + Shift + P on mac
2. Type "Workspace settings".
3. Change exclude settings either via the GUI or in settings.json:

GUI way

1. Type "exclude" to the search bar.
2. Click the "Add Pattern" button.

Code way

1. Click on the little {} icon at the top right corner to open the settings.json:

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

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

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.