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: Search for workbench.editor custom labels patterns in VS Code settings Click Add Item Enter */**/index.{js,jsx,ts,tsx} in Item and ${dirname} (${filename}.${extname}) in Value 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 !!
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:
- Search for
workbench.editor custom labels patternsin VS Code settings - Click Add Item
- Enter
*/**/index.{js,jsx,ts,tsx}in Item and${dirname} (${filename}.${extname})in Value - 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 !!
