Allow tabs to wrap to multi-line

[illz]

I almost always have more tabs open than fit in the horizontal space provided. I have seen the thread on shrinking tabs to try to fit them in one line #15048, and I've also seen this closed feature request for what I'm asking for - #32836. That issue was closed saying there would be no changes for 6-12 months, and it has been around 15 months now so wanted to reopen discussion.

JetBrains IDEs added this a few years ago - simple config option to wrap open tabs to multiple lines rather than extending indefinitely horizontally, forcing a horizontal scroll or use of the Open Editors section in the left bar. While the Open Editors block is a nice idea, I've spent so many years switching via tabs (and continue to do so in all my other editors) that I'm requesting a better solution.

[hugodichon]

For sure that is a really basic and essential functionality to have. Following up on that for a while now.

[joaohonorato]

Can this be done any time soon? I just love this feature, it awe me to not see it in vscode.

Up discussion!

[neil-119]

Would love to have this as well. We use VS Code mostly for Angular work and we typically have multiple components (TS, HTML, CSS) and services (TS) open at a time, and we like to group relevant tabs together at the top.

[helloli]

Although we can use 'Open Editors' or 'Ctrl + Tab' instead, many of us would appreciate it very much if multi-line tabs were supported. Please carefully consider it.

[akiraah]

Has there been any updates regarding this feature? How difficult would it be to create an extension that does this and publish it to the market place ?

[im-richard]

Seems like really simple functionality which is almost a must. I've debated utilizing other apps just for this feature alone because at any given time, I can have roughly 20-30 tabs open, and everything on a single row is just annoying at times.

Really hope this is looked at as it's literally the only pet-peeve I currently have with vscode.

[hugodichon]

Come on guys... At least provide some feedback to people expecting that feature one day.
If I had enough time I would have liked to investigate and submit a pull request, unfortunately I don't have that luxury.
I would like to add up that Microsoft main development product has that feature built-in since a bunch of years already, it's called Visual Studio.

[akiraah]

I've gave up with VSCODE - this feature should've been built in, even Eclipse has it. I'm using IntelliJ now as a lot of things come out of the box.

[lattice0]

PLEASE, THIS FEATURE IS EXTREMELY USEFUL

Look at my firefox: https://imgur.com/a/CKOGGMq

I can't live without miltiline tabs

It's VERY annoying to search for the opened tabs by scrolling. I'm almost giving up on vscode because of this.

[stevenlaidlaw]

I've implemented a stop-gap solution using VSCode Custom CSS. Just create your own custom CSS file in your system and fill it with the following:

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

Then just point the plugin at your custom file in your settings.json like so:

    "vscode_custom_css.imports": [
        "file:///home/username/path/to/dir/custom.css"
    ],
    "vscode_custom_css.policy": true,

Then hit ctrl-shift-p and run "Reload custom CSS and JS"

This has solved the problem for me until they implement an in-app solution.

[manustays]

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

@stevenlaidlaw, your solution worked for me, thanks! How do you figure out the classes used by vscode?

---

EDIT:

As suggested by @stevenlaidlaw below, VSCode has an option in action menu (Ctrl+Shift+P) to Toggle Developer Tools.

I ended up downloading the source code to find the classes for individual tabs and added the following CSS to make the tabs thinner (so that they take less vertical space):

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
	height: 25px;
	padding-left:4px;
	font-size:0.8em;    /* size of text and icon */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
	font-size:inherit !important;    /* apply new file-size to tab label */
}

/* below CSS for the close button on tab */

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
	width:20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
	height: 12px;
	width: 12px;
	background-size: 12px;
}

[stevenlaidlaw]

@manustays you can toggle the chrome dev tools via the action menu (ctrl+shift+P)

[akiraah]

After applying the custom.css I got an error stating "Your Code installation appears to be corrupt. Please reinstall".

Has anyone experienced something similar ?

[stevenlaidlaw]

@Akira90 As detailed in the plugin (https://github.com/be5invis/vscode-custom-css):

If Code complains about that it is corrupted, simply click “Don't show again”

[akiraah]

@stevenlaidlaw

It keeps appearing again and again, after closing it appears again after 30 seconds. Then cmd + q is disabled as you can't close vscode because of the shortcut cannot be found, checked keymaps - it's still there.

This issue appeared after I've installed the Custom CSS and JS extension, I had to completely reinstall vscode.

[lattice0]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Please Microsoft, provide this by default

[Manachi]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

[richardnnn]

+1 Surprised this is not yet supported as of 2019

[kenjione]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

@Manachi,

If you look up you can find @stevenlaidlaw's post how he has solved the issue. You need to install vscode-custom-css extension and copy the stylesheet which you can find in his (or @manustays's) comment.

[rmolinamir]

Look at my firefox: https://imgur.com/a/CKOGGMq

It would be amazing for vscode to achieve this, was about to open an issue until I found this :)

Has there been any announcements regarding this feature?

[sebaranowski]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Agree. A new settings field for an additional css file or raw styles string for overwrites would help too. Atom has this too and I love it - this makes the DevTools inside vscode so much more useful..

[josineiaraujo]

This is an option I wish I could use!

[rajnisheu]

Its unbelievable there is no mutli line tab support. The Open Editors list is so irritating to the eye jumping up and done when files are opened and closed.

+1 for the issue

[dhex]

This is not just nice-to-have. It is a must. Waiting.. for official news ...

[hoodist]

Multi-line-tabs is very useful feature for editors.
'Open Editors Block' is good idea but it's not enough for us.

I hope that Microsoft adding to this feature.

[nausicaasnow]

Definitely a must have feature.

[vannaka]

@sneakyfish5 you are a hero!

[christiancolemandeloitte]

Ha! Only just now googled this as a pain point for myself and I'm lucky enough to see that it's going live very soon. Awesome!

[swinder0161]

@bpasero @sneakyfish5 Thanks for your efforts to have this feature merged. I am already using and loving it.
Just wondering if there is option to change the tab height? it looks like tab height is too much on mac version.

Also the tabs are not equal size, it makes the file selection a bit confusing. And the last line of tabs is in justified text alignment mode, so a single tab or 2 tabs cover the whole line.

Is there an option to have left aligned tabs and leave empty space on the right?

[bersbersbers]

I have the following issue today on Version: 1.53.0-insider (user setup), Commit: a48ef56. When activating an editor group, additional icons may appear, changing the line wrapping of editor tabs, making the text jump, and leading to an involuntary selection of other text:

Should I file this separately or this a good place?

[bpasero]

In today's insider build (https://code.visualstudio.com/insiders/) you can enable wrapping tabs via workbench.editor.wrapTabs: true. I suggest that if you encounter any issues, you report them as individual issues (such as @swinder0161 and @bersbersbers) and keep one issue to one topic (not multiple things). That makes it easier to discuss things individually.

One setting that impacts the sizing of tabs is: workbench.editor.tabSizing. Set it to shrink to stop tabs from growing large when wrapping.

There is no setting to change the height of a tab otherwise.

Thanks for testing this 👍

[im-richard]

Just because it has been a long time coming; trying it out now and it is a-maz-ing.
Seriously; this just puts the cherry right on top of VSCode.

It sounds like such a simple thing for people to hound about for so long; but it really makes all the difference in the world, and it will dramatically help flow and cut down on needing to scroll and find a tab when some of us can work on 20+ tabs at once in our projects.

Thanks for adding this.

[fraigo]

@sneakyfish5 @bpasero thank you for the continuous effort on this feature. Glad to see this option available today on Insiders!
I was wondering if there is another configuration option to control the minimum shrink size until it wraps to a new line when using Workbench > Editor : Tab Sizing : shrink.

[bpasero]

There is no setting currently to control the minimum width of a tab when setting the tab sizing to shrink. It is hardcoded to 80px.

[swinder0161]

I have actually added custom width in shrink mode as part of a new PR which has title for custom height. Please upvote the same.

…

On Tue, Jan 5, 2021, 11:15 PM Benjamin Pasero ***@***.***> wrote: There is no setting currently to control the minimum width of a tab when setting the tab sizing to shrink. It is hardcoded to 80px. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#70413 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADBBZ223MGI2NJ3SCG6AQTSYNFZ3ANCNFSM4G5XB4KA> .

[fraigo]

@swinder0161 please share the link to that PR to follow up, thanks!

I have actually added custom width in shrink mode as part of a new PR which has title for custom height. Please upvote the same.
…
On Tue, Jan 5, 2021, 11:15 PM Benjamin Pasero @.***> wrote: There is no setting currently to control the minimum width of a tab when setting the tab sizing to shrink. It is hardcoded to 80px. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#70413 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADBBZ223MGI2NJ3SCG6AQTSYNFZ3ANCNFSM4G5XB4KA .

[vannaka]

@fraigo Here's the issue for configurable tab height: #113832.

[s-kocher]

With many files opened and multi-line tabs enabled, the heigh can be used a lot, extreme example (but we never know, lot of legacy code exploration 😅 ) :

I remember the good old Tab Mix Plus extension on Firefox allowing to enable multi lines tab but with another option for the max displayed rows :

So when more than maximum allowed rows are needed, the rows are scrollable in vertical direction by hovering the tab area and using mouse wheel.

In my humble opinion (and as a tab hoarder dealing often with this problem), it's the best balance to allow many tabs easy navigation and better than other solutions :

• single line with unreadable tabs shrinked to fit all (chrome browser behavior for example)
• single line, tabs readable (fully displayed or reasonable shrink) but "infinite" scroll to navigate between the first and the last item
• multiple lines with all tabs displayed and readable with lot of vertical space used

[bpasero]

As I said before, if you have a suggestion or found a bug with wrapping tabs, best to open a new individual issue for each.

[MatthewS2077]

Would love to have this as well. We use VS Code mostly for Angular work and we typically have multiple components (TS, HTML, CSS) and services (TS) open at a time, and we like to group relevant tabs together at the top.

This would be so useful! Ability to select multiple tabs and group them under single tab. And ideally option to have VSCode automatically group files with the same name but different extensions (eg test.component.ts/test.component.html/test.component.scss) under the same tab.

[farteryhr]

still this: #70413 (comment)
here's my Just-Condensed™ mostly-works™ style based on previous comments in case you may like it: (sorry for mosaic cuz it's workplace code)

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label:before {
  height: 24px;
  background-size: 16px;
  width: 16px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions .action-label {
  margin-right: 4px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
  margin-right: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element {
  height: auto !important;
  min-height: fit-content;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container{
  height: auto !important;
  min-height: fit-content;
  flex-wrap: wrap;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab{
  height:24px;
  min-width: fit-content;
  min-width: -moz-fit-content;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(128,128,128,0.5);
  padding-left: 4px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label {
  line-height: 24px;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
  width: 15px;
}

there is problem with the height of editor instance though, but not big trouble so i didn't investigate more...

[SantiBailors]

I've gave up with VSCODE - this feature should've been built in, even Eclipse has it. I'm using IntelliJ now as a lot of things come out of the box.

Are you sure Eclipse has it ? I ended up here while searching for info about how to have multiple tab rows in Eclipse, and the many mentions of this feature I found about Eclipse are all from people who say they would like Eclipse to have that feature. In my experience they are right that Eclipse doesn't have it, and I would really like to have it. How do you enable multiple tab rows in Eclipse ?

[sean-d]

Would love to have this as well. We use VS Code mostly for Angular work and we typically have multiple components (TS, HTML, CSS) and services (TS) open at a time, and we like to group relevant tabs together at the top.

This would be so useful! Ability to select multiple tabs and group them under single tab. And ideally option to have VSCode automatically group files with the same name but different extensions (eg test.component.ts/test.component.html/test.component.scss) under the same tab.

Could not agree more. Top row could be project level configs/settings, second row could be middle tier files, bottom row any front end files actively being worked on. This is how I imagine my workflow would look given the ability to do such a thing :)

[jreich1-godaddy]

Just tried this out in 1.53.0-insider. Works beautifully. Thank you!!!

[yulei900609]

When will this feature be merged into formal release?

[gjsjohnmurray]

When will this feature be merged into formal release?

Expect your 1.52.1 to update to 1.53 later this week.

[mocsy]

I just got 1.53.0
From the change log: "A new setting workbench.editor.wrapTabs lets editor tabs wrap instead of showing a scrollbar."
Yay!

[fraigo]

Thanks to everyone working to push this out, specially @sneakyfish5 and @bpasero for the hard work!

[BjarkeCK]

Now, can we get some love for the fokes who wants to hide the tab bar area completely :) ? #33607