Showing path in file-tabs in Visual Studio Code

Question

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?

There is a thread about it here [https://github.com/Microsoft/vscode/issues/8499](https://github.com/Microsoft/vscode/issues/8499) — Anish, Oct 31 '16 at 13:52
This setting will show the full path in the title bar (though not the tab): `“window.title”: “${activeEditorLong}${separator}${rootName}”` — edan, Mar 30 '18 at 16:34
`${activeEditorMedium}${separator}${rootName}` works even better imo, I don't see a reason to see the entire path of the file as opposed to path from src root — Siddhartha, Nov 30 '21 at 02:14

Drkawashima · Accepted Answer · 2023-08-03T17:08:31.900

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 for shows a row of breadcrumbs with the complete file path - in the Code view below the Active tab.

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.

score 29 · Answer 2 · edited Jun 09 '20 at 12:06

29

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.

edited Jun 09 '20 at 12:06

Peter Mortensen

30,738
21
105
131

answered Feb 12 '19 at 10:55

ValRob

2,584
7
32
40

There are two *"Label Format"* in the search result: *"Workbench ► Editor: Label Format"* and *"Workbench ► Editor ► Untitled: Label Format"* – Peter Mortensen May 12 '20 at 22:27
For version 1.45 (2020-04). – Peter Mortensen May 12 '20 at 22:51
The second has different options, *"Content"* and *"Name"* – Peter Mortensen May 12 '20 at 23:23
Perhaps use a search term that will result in a single hit (currently there are 10 hits)? – Peter Mortensen May 12 '20 at 23:30
1

Enclosing in quotes cuts the number of hits down from 34 to 7 (version 1.45.1, 2020-05-14): `"workbench label format"` – Peter Mortensen Jun 09 '20 at 12:18
1

The search can be made unique (only one search hit) by typing out (or pasting) the setting ID: `workbench.editor.labelFormat` – Peter Mortensen Jun 09 '20 at 12:55
Yes, using *"short"* will display the parent folder (this question). To display absolute paths, use *"long"*. – Peter Mortensen Jun 09 '20 at 13:04

score 8 · Answer 3 · answered Sep 26 '21 at 06:19

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

Drkawashima · Answer 4 · 2023-06-19T18:47:22.007

7

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 two index.js files and one event.js file. VsCode decides it's a good idea to display the foldername for the index.js files but not for the event.js file since that filename is unique

This is enough for me in some situations (when I've got lots of files with the same name)

edited Jun 19 '23 at 18:47

answered Sep 13 '17 at 18:58

Drkawashima

8,837
5
41
52

9

There is also a setting to control the behavior and format of the label: "workbench.editor.labelFormat" – Ej. Oct 23 '17 at 18:54

score 2 · Answer 5 · edited Aug 10 '22 at 08:48

2

Step 1: Go to File > Preferences > Settings

Step 2: search for "workbench.editor.labelFormat"

Step 3: select medium from a drop-down

edited Aug 10 '22 at 08:48

cottontail

10,268
18
50
51

answered Aug 10 '22 at 07:50

Kapilrc

1,362
15
11

Shirshak kandel · Answer 6 · 2023-06-24T14:56:44.203

2

Video reference codeGrepper

Go to vs code setting and search "Label format" you will see

Workbench › Editor: Label Format Controls the format of the label for an editor.

change from default to short.

edited Jun 24 '23 at 14:56

answered Apr 07 '23 at 12:23

Shirshak kandel

328
3
7

score 0 · Answer 7 · answered May 27 '21 at 12:08

0

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.

answered May 27 '21 at 12:08

Vitexikora

308
2
10

1

The link leads to a `404` error page. – xperator Dec 05 '22 at 10:40
Seems like the plugin was discontinued. I stopped using it months ago and rather stopped using index files at all, it was a nightmare to keep an overview of which tab is which file. – Vitexikora Dec 06 '22 at 14:11

score -1 · Answer 8 · answered Feb 27 '21 at 13:53

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.

While this is useful, it's unrelated to the question, which is about setting the titles of the editor tabs. — Théophile, Sep 22 '21 at 16:40

Showing path in file-tabs in Visual Studio Code

8 Answers8

Linked

Related