CODEWITHSUNDEEP
visual-studio-code
Andrey
Andrey

Reputation: 6184

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?

Upvotes: 452

Views: 298457

Answers (12)

Wosi
Wosi

Reputation: 45163

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.

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

Upvotes: 725

Muhammet
Muhammet

Reputation: 436

I'm using the extension that named Hide Files

Url: https://marketplace.visualstudio.com/items?itemName=roonie007.hide-files

Easy to hide files and folders

Upvotes: 0

Czechdude
Czechdude

Reputation: 182

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

Upvotes: 4

Yinon Ehrlich
Yinon Ehrlich

Reputation: 626

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

Upvotes: 0

totymedli
totymedli

Reputation: 31048

GUI way

  1. Go to "File -> Preferences -> Settings" (or press Ctrl + ,) then: exclude tutorial via screenshot
  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: Click brackets icon to open 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.

Upvotes: 156

stackoverflowuser2010
stackoverflowuser2010

Reputation: 40869

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.

enter image description here

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

enter image description here

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

enter image description here

Upvotes: 5

moof2k
moof2k

Reputation: 1897

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

enter image description here

Upvotes: 4

Nisd
Nisd

Reputation: 1133

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

Upvotes: 18

Premkumar chalmeti
Premkumar chalmeti

Reputation: 1018

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

Upvotes: 1

GorvGoyl
GorvGoyl

Reputation: 49150

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.

enter image description here

Upvotes: 6

Rafael Santos Sá
Rafael Santos Sá

Reputation: 19

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.

Upvotes: -16

Drew Noakes
Drew Noakes

Reputation: 310802

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

enter image description here

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.

Upvotes: 120

Related Questions