Improving VS Code Tab Labels for index.ts and page.tsx

Introduction

Have you ever opened multiple files with the same name, such as index.ts or page.tsx, in VSCode and found yourself lost?

Actually, if you look closely, when you have files with the same name open, the directory name is displayed on the right. However, the text is faint and requires extra eye movement, making it hard to distinguish at a glance.
In this article, I will show you how to include the directory name in the tab display name by changing VSCode settings.

Configuration Method

Add the following configuration to your VSCode settings file, settings.json.

  "workbench.editor.customLabels.patterns": {
      "**/index.*": "${dirname} .../${dirname(1)}",
      "**/{page,layout,template,route,actions,hooks,components,utils,types}.{js,ts,jsx,tsx}": "${dirname}/${filename}.${extname} .../${dirname(1)}",
    }

Use glob patterns to specify the target filenames and extensions.
In this example, I'm targeting filenames commonly found in Next.js projects.

A key point is the .../${dirname(1)} part.
By using the ${dirname(N)} notation, you can get the directory name N levels up. I used this to create a display similar to VSCode's default settings.
Also, since index.* is a special file, I've configured it to display its directory name.

Now, files that tend to have identical names will be displayed with their directory names included!

Some people have suggested using absolute paths to display emojis.
That's an interesting idea.
https://dev.classmethod.jp/articles/vscode-custom-tab-labels-for-better-coding/
For more detailed syntax, refer to the documentation displayed when you hover over the property name in settings.json.

Conclusion

With modern frameworks designed with this in mind, concepts like co-location and "package by feature" are becoming more widely understood, and directory structures based on responsibility are being more easily accepted.
However, duplicate filenames can sometimes make it difficult to gain understanding from team members accustomed to traditional layer-based directory structures.
I have actually received such feedback from team members myself, and since I also found it inconvenient, I was looking for a solution.
I had been searching for a VSCode extension to solve this, but I never imagined it could be resolved with a built-in feature.
It appears to be a new feature introduced in version 1.88, released on April 5, 2024.
Since this issue has low "googleability," I hope this article helps.

Search Keywords:
vscode, tab, display, name, alias, directory, path, filename, extension, settings.json
Directory name, File name, Folder name, Path, Tab, Display, Name, Alias, Settings, VSCode Extension