How do I hide certain files from the sidebar in Visual Studio Code?
Visual Studio-CodeConfigurationVisual Studio-Code Problem Overview
In Visual Studio Code, what setting can be configured, using file patterns, to hide files from view in the sidebar's file-explorer?
I would like to hide certain groups of files, like .meta
and .git
files.
Visual Studio-Code Solutions
Solution 1 - 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.
Solution 2 - Visual Studio-Code
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
}
}
Solution 3 - Visual Studio-Code
The "Make Hidden" extension works great!
> Make Hidden provides more control over your project's directory by enabling context menus that allow you to perform hide/show actions effortlessly, a view pane explorer to see hidden items and the ability to save workspaces to quickly toggle between bulk hidden items.
Solution 4 - Visual Studio-Code
The __pycache__
folder and *.pyc
files are totally unnecessary to the developer. To hide these files from the explorer view, we need to edit the settings.json for VSCode. Add the folder and the files as shown below:
"files.exclude": {
...
...
"**/*.pyc": {"when": "$(basename).py"},
"**/__pycache__": true,
...
...
}
Solution 5 - Visual Studio-Code
I would also like to recommend vscode extension Peep, which allows you to toggle hide on the excluded files in your projects settings.json.
Hit F1 for vscode command line (command palette), then
ext install [enter] peep [enter]
You can bind "extension.peepToggle" to a key like Ctrl+Shift+P (same as F1 by default) for easy toggling. Hit Ctrl+K Ctrl+S for key bindings, enter peep
, select Peep Toggle and add your binding.
Solution 6 - Visual Studio-Code
For .meta
files while using Unity3D, I found the best pattern for hiding is:
"files.exclude": {
"*/**/**.meta": true
}
This captures all folders and subfolders, and will pick up foo.cs.meta
in addition to foo.meta
Solution 7 - Visual Studio-Code
If you're using VSCode:
- File > Preferences > Settings
- Search for:
files:exclude
- Then add
**/node_modules
- Click
OK
.
You shouldn't need to restart or reload VSCode to take effect
Solution 8 - Visual Studio-Code
If your working on a Angular 2+ application, and like me you like a clean working environment, follow @omt66 answer and paste the below in your settings.json file. I recommend you do this once all the initial setup has been completed.
Note: This will actually hide the .vscode folder (with settings.json) in as well. (Open in your native file explorer / text editor if you need to make changes afterwards)
{
"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
}
}
Solution 9 - Visual Studio-Code
VS Code's File Nesting Feature
See the GIF below
I answered this question, with File-nesting
as an answer a month or two ago, however, the feature wasn't actually released yet, but today the "VS Code File Nesting Feature" released officially.
It's one of the cooler features released in the past 6 months or so, for sure. I took the time to create a gif, which shows the configuration I used to get the functionality that the gif demonstrates. Ill also go over each available setting.
The GIF you see below shows File-Nesting, and How it works.
The gif shows a folding control that is able to toggle files in & out of view (one might say that it hides them, which would be an accurate statement). However, it does this without a directory. The question at this point is HOW? How does it know which to hide?
File-nesting has to be configured. You got to add the settings you see in my settings.json
file on the right side of the GIF, but before you go watch the GIF again, lets go over each file nesting setting below.
Available Configurations
The following excerpts were taken straight from the release notes for the "VS Code April 2022 release"
-
explorer.fileNesting.enabled
- Controls whether file nesting is enabled at-large. It can be set either globally or for a specific workspace.
-
explorer.fileNesting.expand
- Controls whether nested files are expanded by default.
-
explorer.fileNesting.patterns
- Controls how files are nested. The default configuration provides nesting intelligence for TypeScript and JavaScript projects, but you're encouraged to modify this to fit your own project's structure. Some examples:
explorer.fileNesting.patterns
The most important setting is ...because it is the setting you use to define how to nest your files. When you enter it into your settings.json
configuration file, VSCode automatically suggests a configuration, and you should definitely roll with that suggestion and add it to your configuration file, if not for any other reason than the fact; it is a great example for showing how to use this feature. The Gif shows some of the configurations I have been toying with, but I will post them below, so you can see the actual text for the configuration.
I highly suggest keeping your "File-nesting" Configuration(s) on a workspace to workspace level.
I find that I am always in and out of my settings.json file if I try to use the file-nesting feature &/or the "files.exlude" setting in my global (or user-scoped) settings.json
file.
Also, as cool as file-nesting is, it doesn't replace "files.exclude"
it compliments it, and quite well might I add.
Below is the default configuration I use for ESM NodeJS TypeScript projects, which is what most of my projects are. The configuration is generic, and changes from project to project.
"files.exclude": {
// -------- PROJECT DIRECTORIES --------
"**/.git/": true,
"node_modules/": true,
"out/": true,
"typings/": true,
// ------- PROJECT FILES -------
"LICENSE": true,
"README.md": true
},
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.jsx": "${capture}.js",
"*.tsx": "${capture}.ts",
".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",
"tsconfig.json": "tsconfig.*.json, package.json, .gitignore",
},
If you like to emit your compiler's (or transpiler's) output inline with your source-documents, then this feature is ten times more valuable to you. I always work out of the standard compiled-language file-structure where there is a root directory that has a source directory, and an out directory, so I don't ever emit JS into my TS, but if you do, this feature will allow you to nest the JS/TS file pairs. Or if you write C/C++ you can nest your *.o
files with your *.c
files.
Its just a great way of hiding files, in a way that consolidates everything, while keeping it very accessible.
Solution 10 - Visual Studio-Code
The accepted answer is perfect if you're looking to hide something like node_modules
.
In the case you're working with a static meta-framework like Astro.js, you'll end up with index.astro
files but also get a lot of noise because of dist/test/index.html
or /dist/about-page/index.html
etc... pages.
To exclude them from the command palette search but still be able to inspect the dist
folder in your files tree, I recommend using the following in a .vscode/settings.json
file
{
"search.exclude": {
"dist/**": true
}
}
That way, you still keep it visible while not having it polluting your ctrl + p
search.
PS: more info can be found here (submit the URL again after opening it to go to the highlight directly).
Solution 11 - Visual Studio-Code
I had the same problem in the past as I was looking to remove the .class files generated after we suceessfully run .java files so .class files are created automatically after compilation and .exe files are created after compiling C or C++ code.
The most simple method to do this is to change your workspace settings by pressing F1 and selecting Preferences: Open Workspace Settings
from the popup. After that scroll to the Files: Exclude
row and add a tag - **/*.class
in the list and now the .class files will not be shown in the Vscode Project File Explorer.
You can do the same method to remove .exe files by using the tag **/*.exe
for C & C++ files.
Thanks
Manpreet Singh
Solution 12 - Visual Studio-Code
Open Settings and search for Files.Exclude
then click on add pattern
then it will give a notification
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
Now open that settings.json
file and search for files.exclude{ } block and include
"**/*.exe": true
Here I use .exe as example, Instead of that use the extension whatever you want to block.
I hope this helps.