How do I hide certain files from the sidebar in Visual Studio Code?

Question

Using Microsoft's Visual Studio Code, how do I hide certain files and file patterns from appearing in the sidebar?

I want to hide .meta and .git style files

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

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.

Answer 2

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