When i do cmd+click on something in the code the node_modules folder gets expanded and in order to close it need to go all the way back to the top of that folder which is very annoying.Is there an way to avoid this?
What I usually do is hiding the node_modules from my sidebar..
Go to: File > Preferences > Settings
Search for files:exclude
And fill up the Exclude pattern with node_modules/ and hit OK
This way, I don't need to turn off the auto reveal functionality
In settings, look for Explorer: Auto Reveal
Controls whether the explorer should automatically reveal and select files when opening them.
You currently have it set true, which is the default value. Change the value to false.
Bring up settings with Control-, (comma) and then type reveal ex into the filter.
To scroll to the file that you are editing in the list of files, right-click on the file's tab, then select Reveal in side bar.
I wrote up more information on my blog.
There is a way in vscode v1.74 to exclude specific files and folders from auto-revealing. The new setting is
Explorer: Auto Reveal Exclude
from Auto Reveal Exclude: Release Notes
Allow customization of Explorer autoreveal logic via explorer.autoRevealExclude
The highly upvoted issue Allow to set explorer.autoReveal per
specific folder has been closed with the introduction of a new setting
explorer.autoRevealExclude. This allows for configuring which files
get autorevealed in the explorer if the autorevealing is enabled. The
setting follows the same pattern as files.exclude by also supporting
sibling matching via when clauses.
In fact, node_modules is excluded by default.
Is it possible to show the last folder in the title bar? If you have multiple instances of VS Code open, it is difficult to distinguish between them from the task bar. If both instances are open on say a file called 'main.ts', you will see 'main.ts' in the taskbar item.
Currently, the title would be [filename open] - [folder open] (e.g main.ts - angular2-training. Is it possible to invert them to become [folder open] - [filename open] (e.g angular2-training - main.ts?
Use window.title in user/workspace settings
The documentation is here with the full list of options of what can be shown. It's quite flexible.
In your case, to display angular2-training - main.ts you can use this
{
"window.title": "${rootName}${separator}${activeEditorShort}"
}
Older VS Code versions
The above only works in v1.10 and up. Here's how to do it in older versions:
v1.9, v1.8 - "window.showFullPath": true shows the full path to the current file, so you can at least see the project folder. Note this config is unsupported after v1.10
v1.7 and below - it's not possible
On version 1.13
Go to settings, inside UserSettings add this line to the json blob:
"window.title": "${activeEditorLong}"
On version 1.41.1
based uploaded image:
1,2: Go to Setting
3: Search windows title in search box
4: Type this statement in windows title box:
${dirty}${separator}${rootName}${separator}${activeEditorShort}
If you want to be able to identify which project you are working on by looking at the window title bar, one option is to set "window.title" to a custom value in the workspace settings file at
/.vscode/settings.json
If the file doesn't exist, create it, then add the following to it:
{
"window.title": "<PROJECT NAME> : ${rootName}${separator}${activeEditorShort}"
}
This is a simple solution that works rather well.
Tested in 1.44
The setting which matches the OPs problem... not being able to tell which VS Code editor is which from the taskbar... is:
"window.title": "${folderName} ${separator} ${activeEditorShort}"
I prefer the simpler
"window.title": "${folderName}"
${activeFolderShort} and friends, don't do what I want, as these follow the folder the active file is in. Whereas I want the folder of the whole "project" shown at all times.
Also, when browsing from the taskbar, I don't care what file is active - it is just noise. I care about the project (i.e. folder). On many occasions, every open VS Code will "main.rs" as the active file, so it is pointless to show it!
Editing the settings in json format even includes intellisense now, so you can see all the options without even having to look them up, and they appear as soon you save the settings file. No need to reload. Awesome!
v1.31 of vscode added these options to window.title:
There are three new variables that can be used within the window.title
setting:
${activeFolderShort}: The name of the folder the file is contained in.
${activeFolderMedium}: The path of the folder the file is contained
in, relative to the workspace folder.
${activeFolderLong}: The full
path of the folder the file is contained in.
In addition of the setting:
"window.title": "${rootName}${separator}${activeEditorShort}"
You now can configure the separator as well with VSCode 1.45 (April 2020)
Allow customize the window title separator
A new setting window.titleSeparator allows to change the separator that is used in the window title.
By default a dash is used.
Just some tweaks i found out:
// will not work on workspace settings.json -> only global
"window.titleBarStyle": "custom",
// show only the name of the workspace folder in the title bar
"window.title": "${folderName}",
// remove the useless icons on the top-right
"window.commandCenter": false,
// make left & top green :-)
"workbench.colorCustomizations": {
"activityBar.background": "#1e2127",
"activityBar.foreground": "#95C085",
"titleBar.activeBackground": "#165900",
"titleBar.activeForeground": "#ffffff",
},
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.
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
}
}
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.
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,
...
...
}
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.
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
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
2022 New File-explorer Features
There are a couple very cool new features that let devs configure the files that show in the sidebar, as well as offering new ways of hiding files, while keeping them accessible.
This answer covers
"explorer.fileNesting" (NEW as of April-2022)
"files.exclude"
explorer.excludeGitIgnore (new as of June-2022)
File Excludes
So the best answer included in this post, originally, was the "files.exclude"
VS Code's File Nesting Feature
Because "File Nesting" is IMO one of the coolest features added to VS Code in recent releases, I thought I'd take the time to create a animated GIF-image that shows how it works in real-time.
Below is a .gif image that shows the explorer.fileNesting feature being used in Real-time
File nesting is very cool, it is important to note, like most VS Code features, it does need to be custom configured for your personal development environment.
Personally I find this is a good addition for the workspace scoped settings.json configuration file. Unless you only ever use VS Code for developing the same type of projects, using the same project template, over & over again (which I understand some people do) I suggest using it to configure each individual project.
An alternative is per-language configuration. I don't use it this way, but it is very helpful with TypeScript's tsc emissions. For Example .d.ts files & *map files, they can configured to always be nested into *.js files, with the same name. Or the *.js files can be configured to nest under the *.ts files.
The above two notes point out that this is a feature aimed at improving the environment for compiled languages that have a compiler that emits project-build files; and specifically "transpilers" like TypeScript in other words,
Below shows a "File Nesting" configuration that you'll likely find written to "./.vscode/settings.json" file that belongs to a TypeScript project.
"explorer.fileNesting.patterns": {
"*.ts": "${capture}.js",
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.mts": "${capture}.mjs, ${capture}.d.mts",
"*.mjs": "${capture}.mjs.map, ${capture}.min.mjs, ${capture}.d.mts",
"*.cts": "${capture}.js",
"*.cjs": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
"*.jsx": "${capture}.js",
"*.tsx": "${capture}.ts",
}
The above configuration is actually from one of my projects, and it results in the following behavior:
I have included below, a complete list of All available configurations, as well as the link to the official release-notes (early form of documentation) that covers the "VS Code File-nesting Feature".
As of 2022-06-17 the following list contains all configurations available for "VS Code's File Nesting Feature".
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:
VS CODE'S OFFICIAL RELEASE NOTES ON THE NEW FILE NESTING FEATURE
File Excludes
NOTE: "File excludes, has been covered by other answers so I will be brief."
"It's important we cover files.exclude though, as the next feature builds on it."
File-nesting is awesome, but don't exclude files.exclude Just yet. Comparing features like explorer.fileNesting, and files.exclude against each-other is not very helpful. It is actually best to look at the new "File Nesting" feature as either an alternative to files.exclude, or as a complementing feature to files.exclude. There's no need to go indepth about using explorer.fileNesting as an alternative, so lets talk a bit about it complimenting files.exclude.
There are several ways you can use the two settings to configure your projects "file-explorer" (the file-tree in the side-bar). I use both explorer.fileNesting & "files.exclude". I nest certain groups of files that obviously share somthing in common. A common example given in the official docs for the file nesting feature is using file nesting to hide your package-lock.json file under your package.json file, which is obviously a great way to make use of file nesting.
However I take it a step further: I also hide my .npmrc file, and if I am writing an NPM-Package, I hide my .npmignore file with the package files too.
Here are two groups I create
package.json
package-lock.json
.npmignore
.npmrc
eslintrc.json
.eslintignore
.prettierrc
.markdownlintrc
The problem is with file nesting, you get a bunch of 1-offs, like .editorconfig (ya I can place it with my .eslintrc.json group, but it doesn't really fit their. And what about .gitignore. I suppose I could just leave .gitignore in the view.
Or I could use files.exclude, and configure my "files.exclude": {} object in my project's .vscode/settings.json file to hide files like .gitignore, LICENSE, .editorconfig, etc...
I can also use it to hide directorys this is somthing File Nesting cannot do. I use it to hide my "build" dir & "node_modules" dir.
By default, files.exclude hides project's .git/ directory, which is why you never see it.
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",
},
The Latest Feature of the Bunch, Which I Edited in a bit after editing in File Nesting's new settings, is the new...
GitIgnore Exclude Feature
This feature allows you to configure VS Code to treat entries in your .gitignore file, as if they were included in your files.exclude object. The means that the File Explorer actually parses your .gitignore file, and reads its contents, then hides the files you configure it too.
To configure the setting to on use explorer.excludeGitIgnore.
Remember, this setting, like the other two features, should not be thought of from a perspective of,
"Is "GitIgnore Exclude" better than "Files Exclude"?
Its unhelpful, and counter productive to think in this way. Git Excludes (as the release notes say)...
...works alongside files.exclude to hide unwanted files from the Explorer.
~ VS Code Release Notes v1.68
You can read more about GitIgnore Excludes Here
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)
https://pastebin.com/X2NL6Vxb
{
"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
}
}
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).
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
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.