How do I hide certain files from the sidebar in Visual Studio Code?
You can configure patterns to hide files and folders from the explorer and searches.
- Open VS User Settings (Main menu:
File > Preferences > Settings
). This will open the setting screen. - Search for
files:exclude
in the search at the top. - 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.
When you are done it should look something like this:
If you want to directly edit the settings file: For example to hide a top level node_modules folder in your workspace:
"files.exclude": {
"node_modules/": true
}
To hide all files that start with ._
such as ._.DS_Store
files found on OSX:
"files.exclude": {
"**/._*": true
}
You also have the ability to change Workspace Settings (Main menu: File > Preferences > Workspace Settings
). Workspace settings will create a .vscode/settings.json
file in your current workspace and will only be applied to that workspace. User Settings will be applied globally to any instance of VS Code you open, but they won't override Workspace Settings if present. Read more on customizing User and Workspace Settings.
Sometimes you just want to hide certain file types for a specific project. In that case, you can create a folder in your project folder called .vscode
and create the settings.json
file in there, (i.e. .vscode/settings.json
). All settings within that file will affect your current workspace only.
For example, in a TypeScript project, this is what I have used:
// Workspace settings
{
// The following will hide the js and map files in the editor
"files.exclude": {
"**/*.js": true,
"**/*.map": true
}
}