Display paths on file tabs in Visual Studio Code

Question

I have a component based folder structure in my project. This is a set of folders with components for one index.js file.

Can I make Visual Studio Code display the name of the parent folder on file tabs? Or am I limited to seeing a bunch of tabs on which everything index.js displayed and nothing more?

Answer 1

Now you can customize your Visual Studio code to always show parent folder names in tabs!

Here's what it looks like with init/views.js , init/routes.js and plugins/modal.js :

Add this line to your user settings:

 "workbench.editor.labelFormat": "short" 

---

Note:

Another useful tool for displaying the exact path to the current file is using breadCrumbs. Add this to your user settings:

 "breadcrumbs.enabled": true 

---

For your information: To open custom settings for Visual Studio code: File → Settings → Settings → User Settings. To view user preferences in JSON format, click the "{}" icon in the upper right corner.

Answer 2

Visual Studio Code has now improved the tabbed user interface to solve this problem.

When you open multiple tabs with the same file name, Visual Studio code will automatically display the parent folder name on each of these tabs.

Here is an example: I opened event.js and two index.js files. Visual Studio Code automatically decides that it is better to show the index.js folder index.js :)

This pretty much solved the bulk of my problem.

Answer 3

Go to the main menu → File → Settings → Settings. And find the ( Cmd + F on Mac, Ctrl + F on Windows) workspace label format.

Choose a short option.

Answer 4

I created a simple Visual Studio code plugin that accepts a list of regular expressions and colors and modifies the titleBar / tabColor based on them. It is great for working with mono-repositories or large projects with multiple packages (e.g. Lerna or React + React Native).

Colortabs