Showing path in file-tabs in Visual Studio Code

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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:

1. Open settings (command + ,)
2. Search for title
3. You'll see something like activeEditorShort, replace it with activeEditorLong
4. Save

Source: https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330