Show more path in vscode tabs [duplicate] - visual-studio-code

I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?

You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.

Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.

Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.

I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330

Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down

You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.

In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.

Related

VSCode individualize every instance? [duplicate]

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

Is there any way in vscode to know where the current the file has been imported?

Are there any extensions/features in vs-code which could let me know where the current file is imported? I usually do a global search of the filename but it is time consuming when the file name is similar to any variable or there are similar named files.
You can do a right-click on every function / variable or class. Then you choose "Find all references" to show where each function / variable or class is called.
For this you do not need an extension, because it is a standard feature of vscode
- find unused exports in project:
you can use this extension in vscode to find all unused exports
+ find name references (e.g. used exports) in project:
click on name then press shift+alt+F12
NO EXTENSION REQUIRED
Yes, We can find the references of a file in VSCODE like this:
Right-click on the file and then select Find References.
VSCODE will show all the references/imports of the file.
image reference
Right-click > Go to References (Shift + F12)
There is also an extension to change the appearance of how references show https://marketplace.visualstudio.com/items?itemName=jrieken.references-plusplus
If you are limiting your search to the current open workspace / folder, you can
do a search for 'import' using the magnifying glass or pressing ctrl+shift+s
open the results in editor by either clicking the link that says 'Open in editor' or by pressing alt+enter
In the document that opens, search for the name of your module.
In this way you will discover all of the imports that involve your module, regardless of whether you have used 'import mymodule' or 'from mymodule import myfunction' or anything else. I'm specifically thinking of how I'd structure a python project, but if you are using another language, you can alter the search in a way that works for the way your language does imports.

How to find folder in VS Code?

I have a project with a lot of files and folders. There are no problems with finding files. They can be found with Ctrl-P. But there are many folders in which files with the same name are made. Therefore, it is easier to search for a file by the name of the folder in which it is located. How in VS Code to search for folders in the current open project?
For example, I have the following project structure:
A/
main.js
B/
main.js
...
Z/
main.js
The file main.js from the folder P will be easier to find by the folder name.
While using Ctrl-P, you can type the full path of the file, so if i have two files named bar you can search on Ctrl-P with
"foo/bar" or with "qux/bar"
Vscode uses fuzzy search (like so many others), so you don't have to actually type the whole thing.
There is no way, to my knowledge and research, to find and be directed to a specific directory.
You can simply select a folder on the explorer and tape some filter keywords.
Recently, vscode added a shortcut, if you are using a recent release just typing won't work, first tape ctrl + f.
Ctrl + Shift + E
and start typing. You'll see your search on the top right corner of file explorer.
By default it does not filter by result but your focus will jumps to the first one. From there you can Enter to open it.
If you want to show only results containing the string of search : click on filter icon next to your search (state will be remembered).
Echap
to exit/remove search
or
Ctrl + Shift + E
again to switch back focus to last place you were typing.
This VSCode extension does exactly what you're asking for.
https://marketplace.visualstudio.com/items?itemName=rwu823.open-folder
I found a way to search through subfolders. Click on a folder you wish to search, than / and start typing for a name of subfolder
It's simple. Just open the parent folder of your folder in VSCode. Then right-click on the folder you want to find subfolder in and choose "Find in folder"

Showing path in file-tabs in Visual Studio Code

I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.

How to hide files with specific extension in VSCode tree view

I use VSCode with Unity3D and I wonder is there any way to hide/ignore/filter certain types of files, for example *.meta files in VSCode's tree view? I cant find any suitable option in settings.
They have added this feature now. Go to File->Preferences->Workspace Settings. That opens or creates the .vscode folder, and underneath it the settings.json file.
Here is a full settings.json file that shows how to exclude the .git folder, the dist folder and the node_modules folder.
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"**/.git": true,
"dist": true,
"node_modules": true
}
}
Not at this time, but you can vote for the feature at the Visual Studio Code User Voice.
F1 > Preferences:Open Workspace Settings > [search settings] exclude >
Files:Exclude > Add Pattern
In other words, press F1 to open the thingy search thing, to find Preferences:Open Workspace Settings, then in the next search box, search for 'exclude', and add the pattern to exclude in the Files:Exclude section.
For example, to exclude all hidden backup files in Linux -- i.e. files with a tilde '~' on the end, add the pattern **/*~.
You might want to exclude the same pattern from the Search:Exclude and Files:Watcher Exclude sections.