How to Hide Files and Folders in a Workspace in VSCode

Sometimes while working in a folder in Visual Studio Code, some files and directories can appear in the Explorer side panel that we don't want to appear. For example, these can be folders managed by an utility like NPM (node_modules), or generated as part of the build process or by a plugin. There is a way to hide them.

Create a .vscode/settings.json file if you don't have one in workspace already, and add the following code:

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

This will hide node_modules and all of its files.

You can also do this going to settings and adding an entry to your workspace's Files: Exclude field¹.

Ignoring Files and Folders in Search

By default, VSCode inherits the glob patterns from files.excludes when excluding files in search, so it shouldn't need to be customized separately.

One problem that can occur is if you use a glob that doesn't end in **. For example, if you used dist, then the search will ignore the file (or directory) called dist itself, but won't ignore dist/main.js, as that's a different filepath, and the glob pattern won't match it.

In this case, you need to use dist/**.

{
    "files.exclude": {
        "dist/**": true,
    }
}

Another problem is if, for some reason, you want the files to appear in the side pane, but not in search. Then you need to use the key search.exclude instead.

To summarize:

1. Use folder in files.exclude to hide a folder from the side pane, but make it appear in the search.
2. Use folder/** in files.exclude to hide a folder and its files entirely.
3. Use folder/** in search.exclude to hide it from search, but keep it in the side pane.

{
    "files.exclude": {
        "hide-folder-or-file-from-side-pane": true,
        "hide-folder-entirely/**": true,
    },
    "search.exclude": {
        "hide-file-from-search-only": true
        "hide-folder-from-search-only/**": true
    }
}

Observation: VSCode will always search documents that are currently open in the application, even if they are excluded by the configuration above, so it might look like the configuration isn't working even if it is because you have an excluded file currently open.

Globbing Tricks

Some tricks you can use in your patterns:

• * all files inside a directory, but in sub-directories.
• ** all files in a directory and sub-directories.
• *.{png,jpg} matches all files that end in the file extensions .png or .jpg.

References

1. https://stackoverflow.com/a/30142299 (accessed 2024-09-15) ↩︎