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: Dart-Code/Dart-Code#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 #12965 (comment) or @aazarkhish's issue #21662.

[karlhorky]

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

#12965 (comment)

[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.

[benibenj]

@wesbos Glob patterns do not support capture groups so this is currently not possible, however, it should be pretty easy to just add multiple patterns to cover the different cases. You can accomplish your dynamic routes problem with two different entries.

Regarding API: #41909 (comment)

Something we are considering is for extensions to provide common patterns for the workbench.editor.customLabels.patterns setting. This would not require any API and would be much easier for extensions to support.

[wesbos]

Great thank you - both of those answers seem more well thought out than my suggestion - thanks a ton!

[benmccann]

Something we are considering is for extensions to provide common patterns for the workbench.editor.customLabels.patterns setting. This would not require any API and would be much easier for extensions to support.

Can you clarify what this means? E.g. would VS Code ship with default patterns for SvelteKit, Next.js, etc.? When you say it would be easier for extensions to support, how would extensions be involved?

[lramos15]

@benmccann Extensions like the Next.js and SvelteKit extension would provide a set of values for this setting that would be applied when the extensions are installed

[mkalinski93]

Is it possible to somehow have parts of the names be upper/lower cased? e.g: I have an Index.vue file in a folder called "products". Then the custom label would be products.vue. I would like to have it Products.vue instead.

[chromey]

I want to use this in an nx monorepo so that every filename is prefixed by the name of the app, e.g.
/apps/myapp/sub/dir/somefile.ts should be displayed as myapp: somefile.ts. Am I right to assume that this is not possible given that the indexes are counted from the end of the path and files exist at any nesting level below the app?

[benibenj]

@chromey the current implementation does not support this. What you can do for the meantime is to an entry for each app. I can see it would make sense to better support such cases. What we could do is add support for negative indices which would allow accessing the folder names from the start of the path. Would this be helpful for you?

[chromey]

Thanks @benibenj, this would be helpful indeed. But the workaround you suggest is also an option for my case, given that there are only ~15 apps in the repo. Thanks again.

[benibenj]

@chromey I'll be adding support for this as I can see it is clearly needed. I'm tracking the issue here #209619. This will be part of next months release.

[benmccann]

Would it also be possible to support new lines? I'd love to be able to do something like #41909 (comment)

[benibenj]

@benmccann Please create a feature request for this

[benmccann]

@benmccann Please create a feature request for this

Thank you. Done here: #209701

[Luke-Callaghan23]

Hey thanks for the effort on this issue. It's great to see it getting added in this latest release. I'm wondering now if there will ever be any effort/ability to work with the hint label of a tab (as in the grayed out and italicized folder name next to the label)? As far as I can tell, the only options to modify the hint of tab label is workbench.editor.labelFormat. For me, I'd like to be able hide the hint completely, but it still shows when: two tabs are open with the same label but have different direct parent directories.

Ideally, we could have complete control like we have with the main label through something like workbench.editor.customLabels.hintPatterns but even just having a new option in workbench.editor.labelFormat for something like "Never show hints" would be fine for my situation. Here is an example of what I want to avoid:

Duplicate labels inside of two different folders with very long names taking up the entire space of my tab bar.

[benmccann]

@benibenj do you think that #209701 might be something the VS Code team is likely to address in the near future? If not, it's possible I may be able to have the Svelte team sponsor it

[riungemaina]

Hi.
Any idea what I'm missing here?
this is what I'm getting

Path: root/parentFolder/folder/file.txt
- ${dirname(0)} = ${dirname} = parentFolder
- ${dirname(1)} = root

[benibenj]

@riungemaina that's a bug which was introduced in yesterdays insiders. Tracking in #211522

[aminpaks]

@benibenj Can we support this in the "search by file", and the global search?

[benibenj]

@aminpaks Please open a new issue for this.

[Luke-Callaghan23]

Is this no longer working in the latest VSCode insiders? None of the old patterns are drawing for me and even using full paths won't work.

tabLabelsBroken.mp4

[ssalka]

Would be great if we were able to set custom titles not only for the file names but also the labels/hints (workbench.editor.labelFormat) – I work in a monorepo and would like to have the hint only show the sub-package the file resides in. I can sorta do that with custom format[${dirname(-3)}] ${filename}, but it doesn't look quite as nice since the package name doesn't have the same styling as the hint (smaller + greyed out text)

[benibenj]

@Luke-Callaghan23 Relative patterns now have to include the workspace folder name itself. This means you should change your patterns to one of the following:

• */.vscode/settings.json
• _WORKSPACE_NAME_/.vscode/settings.json

Regarding absolute patterns, they must start with a /

[mlntr]

If you have duplicate filenames in your workspace and want labels (showing folder name) automatically appear, you can support #209765

[babakfp]

Awesome job on this! Just tried it out on a sveltekit and Next.js project. Some questions / possible feedback:

Is there any chance to access the capture groups in the result? Do globs even have capture groups? I found a few instances that maybe it could be helpful, but I could also think maybe we just write multiple globs for these instances.

app/listings/page.tsx is a common route, and "**/app/**/page.tsx": "${dirname}.${extname}", will give me listings.tsx - perfect.

But now I want to write one for dynamic routes:

app/listings/[id]/page.tsx and app/albums/[id]/page.tsx

So in this case [id].tsx isn't a great name for the tab. In this page I want listings/[id].tsx and albums/[id].tsx

Maybe another question for this is if this tab-naming API will be made available to extensions, so the Next.js/Sveltekit Plugins can dynamically/conditionally generate the tab name (and maybe icon?)

#223107 (comment)

[firelizzard18]

@benibenj @lramos15 Another use case: providing a meaningful label for custom editors. In my extension I am generating CPU/memory usage profiles and storing them in the extension's storage directory (or the OS temp directory, depending) and using a custom editor to present those to the user. As such, the default label is meaningless to the user. If I were able to set the title of the custom editor, I could make that something meaningful to the user. Unfortunately setting the title property of the webview apparently has no effect. I'd prefer an API for this, maybe part of the custom editor provider, so I can provide a useful label without having to hack it into the filename.