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 Visua

Answer 1

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.

Answer 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.

Answer 3

I've created a simple Visual Studio Code plugin which accepts a list of regexes and colors and changes the titleBar/tabColor based on them. It's great for working on mono repositories or large projects with multiple packages (like Lerna, or React + React Native).

ColorTabs

Answer 4

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.