461

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?

Improve this question
1
  • 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. Commented Sep 9, 2021 at 8:15

12 Answers 12

Reset to default
737

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

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.
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.
How does inheritance work here? Do I have to list all excludes or just the ones not listed in user settings?
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.
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: code.visualstudio.com/docs/getstarted/…
|
160

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.

Improve this answer

1 Comment

omg, watcherExclude may be just what I need to deal with major lag due to watching bazel autogenerated files... thanks so much for this!
121

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.

Improve this answer

2 Comments

I had to place files.exclude inside settings:{ ... } when applying it to the workspace settings (.code-workspace 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.
Here is an extension if you want to easily toggle the excluded files
18

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 } } }
Improve this answer

Comments

6

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

Improve this answer

Comments

5

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

Improve this answer

Comments

4

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

Improve this answer

Comments

4

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

Improve this answer

Comments

1

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 } }
Improve this answer

Comments

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
Improve this answer

Comments

0

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

Improve this answer

Comments

-16

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.

Improve this answer

1 Comment

This doesn't answer the OP's question at all.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.