showing project folder in title bar for Visual Studio Code - visual-studio-code

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

Related

Files in Folder named "templates" don't apply colors and suggest in VisualStudioCode

If I name the folder "templates" or "template", the files in the folder don't apply colors or suggest in VisualStudio Code.
1st image shows when I named the folder "templates", and 2nd one shows when I named the folder "foo" (flutter).
I'm not sure but this happens maybe because of a extension that I added?
Please tell me how can I avoid this.
This is my setting of files.associations:
As indicated by the asker in the comments, the issue is due to file associations. Check your settings.json file to see if you have anything set in the "files.associations" setting that could be causing this. Otherwise, try disabling extensions that aren't needed to see if they are related to the issue. You can also change what file association is being used by clicking the lanugage indicator on the bottom right of the screen that has a "Select Language Mode" hover message. The same action can be done by using the command palette and using the "Change Language Mode" command.

How to remove the "recently opened" list from the quick open panel in VS Code?

Using the quick open shortcut (CTRL/CMD + P) to navigate files always put the recently opened files first, then the file results.
I would like it to show me only the file results, or at least put them first, but I can't find any options that would do this. Does it exists? Or do I just lack the right term to search ?
Use this in your VS Code settings (Code -> Preferences -> Settings in macOS, File > Preferences > Settings on Windows/Linux). Open the Settings in JSON format (document icon on the top right of the tab bar), and add:
"search.quickOpen.includeHistory": false
I am adding this answer just to give a description of that property. All credits to #Hejazzman.
"search.quickOpen.includeHistory": false, // by default is true
This setting was released of VS code version 1.28 in September 2018. According to the official release documentation,
A new setting allows you to control if files that were recently opened should be part of the Quick Open file picker. By default, files that were recently opened will appear to the top of the search and other files from the workspace below. If you would prefer to not see recently opened files on top, you can change this setting to false.

VSCode Settings.json is empty

I just install the latest version of the VS Code on my Win 10 x64, before that I install Python as well, but nothing else.
When I open the VS Code, it seems my Settings.json is empty (just my theme and zoom level are there).
I opened the Settings.json from settings with clicking on the icon that you can see in the bellow image (noted with a red circle in the top right side) or with searching the JSON keyword in the setting (result is the same)
But in this file I just have two lines of code which you can see in the below image:
But I think it has to bee a big file with lots of settings and so on, even I check this file in this path: %APPDATA%\Code\User\settings.json and it was empty and just have this two lines of code.
I install the python extension, Dracula theme and so on in my VS Code.
.
Can you help in these questions:
Do you know what is the problem?
How I can restore the default value of the setting? (in case they are missed)
I want to change the color of the comments in the python language because in this theme it is not easy for me to read them in files, I found I can change it from the Settings.json but mine is empty,
settings.json only contains those settings which override the default behaviors.
In order to restore the default settings (from .json) you have to delete the line. (You can also do it from the GUI)
I think the setting "workbench.colorCustomizations" is what you are searching for; try to Google it.

Visual Studio Code files.exclude setting not working

I am using Unity and trying to exclude .meta files from the file explorer sidebar. I navigated to File->Preferences->User Settings (or Workspace settings, doesn't matter), and set the contents of the file to the following:
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"**/.meta": true
}
}
...and saved my changes. Yet, when I click the Refresh icon or close/reopen my folder view, I am still seeing all the .meta files showing up in the left pane. Am I doing something wrong here?
My problem was basing my pattern off of the existing ones, which excluded specific file names rather than patterns. I simply needed to add an asterisk before the file extension, i.e.
"**/*.meta"
instead of
"**/.meta"
Check this button if you're seeing excluded files in search.
The cog button needs to be highlighted in order for files.exclude to apply.
It's also worth noting that, in the search sidebar, "files to exclude" and "files excluded through settings" behave differently.
In "files to exclude", it's sufficient to write *.meta, but in "files excluded through settings" (set in the user settings file) you must write **/*.meta.
Follow this path:
C:>Users>UserName>AppData>Roaming>Code>User>settings.json
and remove line '**/.project':true

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

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.