Show folder name instead of index.tsx in VS Code

If you're like me, you probably have a dozen tabs called index.ts or index.tsx opened in VS Code, looking like this:

While VS Code shows the folder name on the right when you have two tabs with the same name open, I always struggle to identify them... (yeah, I read left to right).

Today I learned that you can customize those labels in VS Code. So if you prefer to see the folder name first for index files, you can use the following setting:

1. Search for workbench.editor custom labels patterns in VS Code settings
2. Click Add Item
3. Enter */**/index.{js,jsx,ts,tsx} in Item and ${dirname} (${filename}.${extname}) in Value
4. Press OK Now your tabs should look like this:

So much easier to read!

(if you'd like to show something different or shorter, feel free to modify the Value to anything that suits you).

Happy Coding !!