Improve Tab Differentiation for Multiple Open Files with Similar Names

[mark0011astra]

When working with multiple open tabs in VSCode, it can be difficult to distinguish between files, especially when they have similar or identical names (e.g., index.html, index.js, index.css in different folders, or config.json across projects). The current tab UI relies heavily on file names and partial paths, but this becomes cluttered and hard to parse when many tabs are open. This issue is particularly frustrating for developers working on large projects or microservices, where files with similar names are common.

Tabs with similar names (index.ts, index.test.ts, index.css) are visually indistinguishable at a glance.
Long file paths in tabs (e.g., src/components/Button/index.tsx) make it hard to quickly identify the relevant part of the file name.
The lack of visual cues for file types/extensions adds cognitive load when switching between tabs.

To improve tab differentiation and make it easier to identify open files, I propose the following practical enhancements to the tab UI:
Add file extension-based visual indicators (e.g., color-coded dots or icons):
Display a small colored dot or icon next to each tab, based on the file extension. For example:
.ts files → Blue dot/icon
.html files → Orange dot/icon
.css files → Purple dot/icon
.json files → Yellow dot/icon
These colors/icons could be customizable in the settings (workbench.colorCustomizations or a new dedicated section).
This would allow users to quickly differentiate files by type, especially when file names are similar.
Implementation: Leverage existing file type icons (from the current theme) or introduce minimal colored indicators to avoid visual clutter.

[gjsjohnmurray]

Have you set "workbench.editor.showIcons": false? Or aren't the icons of your chosen file icon theme sufficiently distinct?

[mark0011astra]

I have "workbench.editor.showIcons": true enabled, so file icons are displayed in the tab UI. However, while these icons help distinguish file types to some extent, they don't fully address the problem of quickly differentiating tabs when file names are similar or identical (e.g., index.ts, index.html, index.css). The icons are helpful, but they are small and often require a moment of focus to parse, especially when switching between many tabs rapidly. Additionally, the icons are primarily designed for the Explorer view, and their rendering in the tab UI can feel secondary or less optimized for quick scanning.

On a related note, I wanted to share a personal thought that might complement ideas, though it's just my opinion and something for reference. When switching between multiple tabs frequently (e.g., going back and forth between two or three files), it can be hard to keep track of the most recently active tabs, especially if they have similar names or icons. One potential way to address this could be to subtly highlight the last few active tabs visually.

For example:
The tab for the previously active file could have a slightly brighter background or border that fades over a few seconds to tens of seconds. This would make it easier to spot the tabs I've recently worked on without needing to refocus on icons or text.
Alternatively, a small, temporary indicator (e.g., a faint underline or glow) could appear on the last two or three active tabs, fading out over time.

[benibenj]

Adding this as feature request to see how many others run into this issue, but I believe some/most of these problems can be solved by extensions using icon themes, file decorations, ...

[vs-code-engineering]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[ArturoDent]

You can make an extension, like Decorate Files that would help. It can colorize file tab names by their extension for example (not the icons, although that functionality could be added).