Provide API to access and change editor tab labels

[chengjianhua]

Feature Request

The Atom has the ability to customize the tabs, it's so powerful for some requirements. For example, there is an extension nice-index in Atom that could be able to rename tabs of many opened editors have same name index.js, rename them to the names of their parent folder.

It's very useful that if we could do so.

@bpasero I got it that the feature requested by #32836 will not be considered in the first half year of 2018. I think my feature request is very similar with that, so may I ask you when the ability to customize tabs in VSC would be added into the roadmap ?

I was excited when I start to think how can I implement a extension like nice-index in VSC, but after I involved in the documents about customizing a VSC extension, I just found that I can not achieve this. I hope that you could consider this feature request, thanks for all of your great works ~ 🙏

[bpasero]

@chengjianhua can you give more details about what you would want to change on the tabs from your extension?

[chengjianhua]

@bpasero I want to there is an api that I can leverage it to get the file paths of all active editors, and then use the file paths to generate the custom labels for active editors.

According to the setting.json in VSC, I guess this is similar with workbench.editor.labelFormat, but more customizable. What I want is to change the return value of getTabLabels(). I'm not very sure about this, I just take time less than one half hour to search the source codes for replying you in time.

// Controls the format of the label for an editor. Changing this setting can for example make it easier to understand the location of a file:
// - short:   'parent'
// - medium:  'workspace/src/parent'
// - long:    '/home/user/workspace/src/parent'
// - default: '.../parent', when another tab shares the same title, or the relative workspace path if tabs are disabled
"workbench.editor.labelFormat": "default",

https://github.com/Microsoft/vscode/blob/204f0482da3e887ad4a852a87aa9ab6079aefda4/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts#L380

https://github.com/Microsoft/vscode/blob/204f0482da3e887ad4a852a87aa9ab6079aefda4/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts#L292

[chengjianhua]

@usernamehw the parent in workbench.editor.labelFormat does not mean the name of parent folder.

If you think that my this requirement could be covered by adding an option in workbench.editor.labelFormat, I'd like to accept that. For further scalability, providing a interface for this would be better. For example, the aforementioned image shows that there is an slash / before the name of parent folder that indicates this is a index.js file in /Parent folder.

If I want change the slash / to other symbols, the api is needed. The options are preset for normal users, api for users that want more customizations and the possibility of implementing some interesting ideas.

[DanTup]

This came up for Dart too: https://github.com/Dart-Code/Dart-Code/issues/577

When a user F12's into a file that's in an external library, the filename is often fairly vague. It'd be nice if we could insert the packages name into the tab title text so it's more obvious to the user the package that they're in code for.

[ncallaway]

I just ran into the same exact issue with as the parent poster. I was having the same usability problem with duplicated index.js files, and went looking for a solution. Finding no VSC extensions that would help in the marketplace I dug into the documentation along the exact same lines as chengjianhua. I too was disappointed to find that it was not possible to update the content of the editor tabs in any way from the extension API.

I also have the same issue to a lesser extent in rust when dealing with mod.rs files.

The current functionality provided by VSC of showing the folder in a de-emphasized label is helpful, but not as helpful as it could be, as I actually care more about the folder name than the file name in these cases.

What I'd like to be able to modify through an extension is:

• The text-content of the title label of the tab (index.js in the screenshot; this is the highest priority item)
• The text-content of the hint label of the tab (.../SharedHeader in the screenshot; this would be a secondary priority, but I can't imagine it's that much more work than providing API access to the title label)
• The icon displayed in the tab (JS in the screenshot; this is personally a low-priority for me, and I'm including it more for completeness)

[karlhorky]

Found this open issue after extensive searching (lots of closed issues about this already), and it looks like a good option for allowing being able to control the tab titles and labels.

The current behavior (even after all merged pull requests trying to fix the problem) is a big problem in Node projects, where index.js files are all over the place. My editor often looks like this:

Alternately, if an open, extensible API is too much to consider now, I would suggest re-considering #30316 (related to #27328), which also provides a solution to the index.js problem.

cc @bpasero @sohlex @rosyatrandom

[karlhorky]

Opening this up would also allow for things like @comerc's https://github.com/Microsoft/vscode/issues/12965#issuecomment-326016306 or @aazarkhish's issue https://github.com/Microsoft/vscode/issues/21662.

[karlhorky]

Also support from @8balloon, @silesky, @ephetic and 5 others for the index.js use case here:

https://github.com/Microsoft/vscode/issues/12965#issuecomment-267773692

[DanTup]

In Dart it's common go import a file like package:mypackage/somefile.dart. If you F12 into that file, the file system location is buried away in some pub cache folder somewhere and the user only sees somefile.dart. I'd love ot be able to show package:mypackage in the place of the long filesystem path (whether it's on the tab, or a tooltip).

[tomByrer]

I hope this feature gets added. It is not uncommon for a ReactJS project to have 20+ index.* files. I was wondering why nice-index had not been ported yet.

[tomByrer]

@bpasero The nice-index author switched to VSCode also, & is awaiting the API ;)

[datoml]

That's great news. I hope they implement it soon.

[AJTJ]

I am definitely waiting on this to be real. It would be tremendously useful.

[AJTJ]

Any news?

[chengjianhua]

@bpasero Hi ~ Is there any new chances to plan this?

[adrian-amigues]

Just started working on a new codebase with only index.js files... This would be amazingly nice to have!

[AJTJ]

anyone working with the Component Folder Pattern in React (which is a lot of people) will really appreciate this.

[benhancock-com]

Just stumbled across this issue. Exactly what I've been looking for. I'm dealing with heaps of React components all named index.js, and this would be a life saver.

[Lsystems]

Same issue for me, the best could be able to change the color and the label of a tab on right click.

[ackvf]

If a proper API is way too difficult for now, I propose that there is an built-in mechanism that triggers specifically for index. files. https://github.com/Microsoft/vscode/issues/67974

[karlhorky]

This issue is exacerbated with folders with prefixes in them. Here I cannot tell without hovering which index.mdx is in which folder:

@bpasero (or happy to redirect to someone else responsible for the tab bar), is there any initiative to do anything about this?

Even a simple default-off option (show directory name as primary label, when there are duplicates) would be enough for a start...

[johnathanz]

Is this a duplicate of https://github.com/microsoft/vscode/issues/37414?

[ncallaway]

@johnathanz

I don't think this is a duplicate. #37414 is asking for a very specific feature be built into VSCode, while this issue is asking for an extension API.

If this issue were implemented, I imagine an extension could provide the functionality requested in #37414 without it needing to be built into VSCode.

As such, I think they are wholly distinct issues, and I would strongly urge this issue to be implemented over #37414, as it would then allow the community to address #37414.

[johnathanz]

That makes sense. Thanks for the clarification @ncallaway

[danielbonifacio]

any update on this?

[mohyeid]

This can open up a lot of possibilities. Such extension and lots of other ideas would be super helpful.

[BrightSoul]

Please add this feature, I have too many index files!

Some regexp setting would be much appreciated to give perfect control to the tab name. Something like this would be perfect.

{
  "workbench.editor.labelName": {
      "matchFilePath": "components/(.+?)/index\\.(.+)"
      "replaceWith": "$1.$2",
      "alsoUseForSearch": true
   }
}

The alsoUseForsearch:true could be useful when I search for a file name by using CTRL+P. Thanks

[xpl]

Any update? I desperately want that feature!

[RobKohr]

@BrightSoul Yeah, I was having this problem. If we could use regex to set labelnames, that would work great too.

[RobKohr]

I hope this feature gets added. It is not uncommon for a ReactJS project to have 20+ index.* files. I was wondering why nice-index had not been ported yet.

Yeah, for React projects instead of calling a file ComponentName/index.js I call it ComponentName/ComponentName.js to get around this very problem. It does make import paths longer, but it is a reasonable trade off to get tab labels to be meaningful.

[karlhorky]

@RobKohr that is fine for a project that you own and control, but there are many, many codebases using this convention that you will not be able to change.

So this is not a complete workaround for many use cases.

[TheLogan]

Any news on this API update?

[b-d-m-p]

Please add this. 🙇

[azinit]

Still actual!

[joaomendoncaa]

Well, after discovering I could "alt + [number]" to switch between tabs I didn't stop until I could make the tabs display their index. I know this is a very niche request so after not finding any solution for this I considered making my own extension for this. Would be a perfect first extension for VSCode.

And now I stumbled upon this...

This is my vote to make the Tabs API solve all the above issues.

[leejoramo-d51]

Hard to believe that this issue has been here for so long considering how common of an issue it is. Javascript and Rust have been mentioned above, but here is a regex off the top of my head for the types of files I regularly deal with:

\.?(ENV|index|setup|config|app|README|TODO)\.?(js|py|php|html?|md|txt)

And those are just the ones that came to mind.

I remember dealing hundreds of index.html files with this in the late 1990's with large static site projects. Today a large vscode workspace for a node.js project can lead to many duplicate file names too.

[adamerose]

Would love to see this implemented.

FYI for anyone else working with lots of index.js files, you can get the directory name to show up without the .../ prefix using the workbench.editor.labelFormat setting:

[abhijit-hota]

Well, after discovering I could "alt + [number]" to switch between tabs I didn't stop until I could make the tabs display their index. I know this is a very niche request so after not finding any solution for this I considered making my own extension for this. Would be a perfect first extension for VSCode.

And now I stumbled upon this...

This is my vote to make the Tabs API solve all the above issues.

Crazy how we have had exactly the same experience. I wanted to make this too. I use a similar extension that displays numbered tabs in the browser and I thought someone would have definitely made this for VSCode. When I didn't find any such extension I thought to make my own because, it "would be a perfect first extension" and that's how I ended up here.

Not adding a lot to the discussion but seconding a very valid use-case.

[mathiasvalentin-thg]

How is this not added yet?! Working with index files is a mess even with the short label format... 😥

[azinit]

Still actual!!! 🤷‍♂️

[maxfahl]

Looking forward to be able to see what files I have opened (y)

[ivangretsky]

Need this badly too. In php context.

[tkdennis]

Still hoping for editor tabs API!

[DavidLGoldberg]

I would love this for my extension, Jumpy2. I have had this functionality working in Jumpy for Atom for a long time. Ideally I'd be looking for a way to use a decorator, and or apply some css access, so I could do some text via "content" attribute.

[YoussefZidan]

any updates from 2022 ??

[andreas-ateles]

Has there been any official stance or comment on this? This feature would really be useful.

[Hunkoys]

I can't wait to have this feature. Together with the ability to sort index files first in a directory. It will be a historical moment.

[TheLogan]

It's been 4 years, how is there no news on this? xD

[kamilmac]

C'mon MS. You can do that!

[perpetualgrimace]

Gimme