Add support for vertical tabs

[santiagopuentep]

Add a big boost in developer productivity by adding support for vertical tabs for files. This is a basic feature in most browsers and is requested by many users.

Tabs are one of the most used features in VSCode in my opinion and improving them has a direct and strong impact in productivity. It would allow for many more tabs to be opened at the same time, without having to scroll them all the time, and could open up possibilities like grouping or archiving in the future.

Duplicates of this issue (that were closed for some reason) have 57 upvotes combined:

25 upvotes: https://github.com/microsoft/vscode/issues/75749 28 upvotes: https://github.com/microsoft/vscode/issues/85527 4 upvotes: https://github.com/microsoft/vscode/issues/65193

The following extension has almost 10,000 installs, but it requires a hack to work (I couldn't do it):

https://marketplace.visualstudio.com/items?itemName=pzuraq.vertical-tab-bar

[orange4glace]

While I'm working on this with my own, here's my idea how it should be implemented.

If verticalTabs option is introduced, there're 6 combinations editor should consider.

1) Tabs (true) Breadcrumbs (true) Vertical Tabs (true)

┌─────────────────────────┐
│Title + Breadcrumbs      │        
├──────┬──────────────────┤
│Tabs  │Editor space      │
│      │                  │
│      │                  │
│      │                  │
│      │                  │
│      │                  │
└──────┴──────────────────┘

2) Tabs (true) Breadcrumbs (true) Vertical Tabs (false)

┌─────────────────────────┐
│Tabs                     │
├─────────────────────────┤
│Title + Breadcrumbs      │
├─────────────────────────┤
│Editor space             │
│                         │
│                         │
│                         │
│                         │
│                         │
└─────────────────────────┘

3) Tabs (true) Breadcrumbs (false) Vertical Tabs (true)

┌─────────────────────────┐
│Title                    │        
├──────┬──────────────────┤
│Tabs  │Editor space      │
│      │                  │
│      │                  │
│      │                  │
│      │                  │
│      │                  │
└──────┴──────────────────┘

4) Tabs (true) Breadcrumbs (false) Vertical Tabs (false)

┌─────────────────────────┐
│Tabs                     │
├─────────────────────────┤
│Title                    │
├─────────────────────────┤
│Editor space             │
│                         │
│                         │
│                         │
│                         │
│                         │
└─────────────────────────┘

5) Tabs (false) Breadcrumbs (true) Vertical Tabs (false)

┌─────────────────────────┐
│Title + Breadcrumbs      │
├─────────────────────────┤
│Editor space             │
│                         │
│                         │
│                         │
│                         │
│                         │
└─────────────────────────┘

6) Tabs (false) Breadcrumbs (false) Vertical Tabs (false)

┌─────────────────────────┐
│Title                    │
├─────────────────────────┤
│Editor space             │
│                         │
│                         │
│                         │
│                         │
│                         │
└─────────────────────────┘

Discuss should be made how layout will be laid on these combinations. Plus, referring to the source code, since Title (with breadcrumbs) and Tabs are tightly glued together, we need to detach them gently.

[santiagopuentep]

I think that looks great.

Two more ideas:

1. To have the option to have the vertical tabs as a panel like the File Explorer and the Outline panels. That way we can have the files and the opened tabs in the same column and save a lot of space. The File Explorer and the tabs both represent a similar type of information if you think about it: the File Explorer shows files in general as they are in the hard drive and the tabs which files are opened, arranged by users' preference.

2. When splitting the editor, to be able to configure vertical tabs or horizontal tabs in each section separately.

[orange4glace]

1. To have the option to have the vertical tabs as a panel like the File Explorer and the Outline panels. That way we can have the files and the opened tabs in the same column and save a lot of space. The File Explorer and the tabs both represent a similar type of information if you think about it: the File Explorer shows files in general as they are in the hard drive and the tabs which files are opened, arranged by users' preference.

I think VSCode already has it although it's a global one, not a per-editor-group.

[santiagopuentep]

I don't have that option here. How do you activate it? I have Folders, Outline, Timeline, NPM Scripts in the Explorer panel.

[orange4glace]

Simply right click on any list header will show context menu for toggling it.

[santiagopuentep]

Maybe it's an extension you have?

[orange4glace]

Weird. It's a built-in functionality since many years ago.

[gjsjohnmurray]

@santiagopuentep maybe you have previously moved Open Editors onto the Output Panel. Does it appear as a tab there? Or in the context menu of any tab there?

[santiagopuentep]

@gjsjohnmurray I searched everywhere but it's nowhere to be found. Two of my colleagues do have it so it'll remain a mystery I suppose. Thanks for the help anyway.

[santiagopuentep]

Found it. "explorer.openEditors.visible": 1 solved the problem.

[santiagopuentep]

@orange4glace From what I can see the Open Editors panel work almost exactly like vertical tabs.

The only problem I see is that it's not visible when other panels are opened (like search). So maybe improving panels to to be able to place them on a new column (for example a column with all the panels and one with the Opened Editors panel) or to the other side of the screen (to have some to the right and some to the left) I think could be a great way to solve vertical tabs + adding new possibilities for the other panels too.

[santiagopuentep]

@orange4glace Also, moving the close button to the right and removing the full path would make them look exactly like tabs and would remove a lot of noise to the panel.

[gjsjohnmurray]

Found it. "explorer.openEditors.visible": 1 solved the problem.

You may want to set that larger than 1. Default value is 9.

Helptext for the section doesn't state that a value of zero disables the panel entirely. It probably ought to.

[jlennox]

I would love for VSCode to have official support for vertical tabs. I found the now discontinued VS extension "custom document well" to be a really big productivity boost so I made a clone of it. The extension API in VSCode didn't permit me to do most of the things I wanted so it's sadly not a normal extension.

I don't want to be doing self promotion so no link. But some ideas.

I handled the issue of a split document well by splitting the vertical tabs. It also supports grouping and coloring per group.

Since that screen shot was taken I've also added pinning, which keeps the pinned tab at the top.

[toughengineer]

Visual Studio now has vertical tabs. Make it happen! Specifically tabs on the right.

[brajbhushan-tripathi]

Visual Studio now has vertical tabs. Make it happen! Specifically tabs on the right.

How can it be enabled?

[toughengineer]

How can it be enabled?

https://docs.microsoft.com/en-us/visualstudio/releases/2019/release-notes-v16.4#vertdoctabs

[FilipKvestak]

enable workbench.files.action.focusOpenEditorsView

it will constantly stay visible in top left corner and will not scroll with project files which is good

for fast switching trough opened files: command + option + left/right

[625781186]

@orange4glace

Wow!! amazing ! Can you write an article to guide me and let me experience it ?

[anoushk1234]

I want vertical tabs for open editors to be implemented the ways edge does for browser tabs

https://user-images.githubusercontent.com/32778608/126530941-6f93e69a-f995-46d8-84fc-968e8d2f07b2.mp4

[Ta4i]

The best implementation of vertical tabs I saw is in WebStorm (IntelliJ IDEA):

This is the only reason I still using WebStorm instead of VS Code 💁‍♂️

[mindplay-dk]

Yep, IDEA IDEs get this perfectly right - especially in terms of being configurable, for left or right positions and alignment, and the option to keep tabs sorted or grouped, or manually sortable with drag-and-drop.

The "Open Files" panel doesn't cut it, because it doesn't stay on-screen - leaving no obvious way to switch between tabs when you have another panel open. (unless you also leave the tabs enabled - which, if you have to reach for two different UIs to navigate between tabs at different times, that really doesn't work either.)

And the vertical-tab-bar extension is just a CSS styling of "OpenFiles", with all the same problems.

The bot said it was added almost a year ago, but I don't think we got any confirmation from a human?

Can the devs please post an update? Where/is this on the roadmap?

[625781186]

Yep, IDEA IDEs get this perfectly right - especially in terms of being configurable, for left or right positions and alignment, and the option to keep tabs sorted or grouped, or manually sortable with drag-and-drop.

The "Open Files" panel doesn't cut it, because it doesn't stay on-screen - leaving no obvious way to switch between tabs when you have another panel open. (unless you also leave the tabs enabled - which, if you have to reach for two different UIs to navigate between tabs at different times, that really doesn't work either.)

And the vertical-tab-bar extension is just a CSS styling of "OpenFiles", with all the same problems.

The bot said it was added almost a year ago, but I don't think we got any confirmation from a human?

Can the devs please post an update? Where/is this on the roadmap?

Haha , the bot mean that this task is going into the vscode team's work, but we don't know when the vscode team will be finished.

[simkimsia]

I hope vscode team can take reference from the awesome work done by ms edge team. The vertical tabs, tab groups, and collections in ms edge is really nice. I switched to edge and stayed with edge for that reason

[Jungo495]

Please advise which code editor has convenient vertical tabs?

[bstst]

Please advise which code editor has convenient vertical tabs?

JetBrains IDEs are cool in that perspective. E.g. WebStorm.

[pilattebe]

Open Editors can now be pinned on the side since 1.64 (January 2022).

Is the issue closed or is there any important missing feature in Open Editors right now ?

[the0neWhoKnocks]

@pilatte the open editor's position wasn't the feature request. Folks are requesting the ability to place the tabs vertically in a column on either side of the editor.

A question for the VS Code devs - What's the technical hurdle for implementing this feature?

[pilattebe]

You can have the list of opened tabs on the left if you have the side bar on the right, you just can't have both on the same side.

@the0neWhoKnocks I agree that Opened Editors is a list of opened tabs and not a proper vertical tab bar.

[the0neWhoKnocks]

Yep, IDEA IDEs get this perfectly right - especially in terms of being configurable, for left or right positions and alignment, and the option to keep tabs sorted or grouped, or manually sortable with drag-and-drop.

The "Open Files" panel doesn't cut it, because it doesn't stay on-screen - leaving no obvious way to switch between tabs when you have another panel open. (unless you also leave the tabs enabled - which, if you have to reach for two different UIs to navigate between tabs at different times, that really doesn't work either.)

And the vertical-tab-bar extension is just a CSS styling of "OpenFiles", with all the same problems.

The bot said it was added almost a year ago, but I don't think we got any confirmation from a human?

Can the devs please post an update? Where/is this on the roadmap?

To add to this comment, there is a clearer, more User friendly visual language implemented with tabs:

• A Tab is a UI that is linked to an area currently being viewed.
• The current tab stands out more than it's siblings (Browsers slightly grey out siblings, Editors add an indicator like a highlight line), and the font generally stands out more.
• Users can easily position/order a Tab based on their preference/need.
• Since the tabs are linked to the Editor, there's a visual grouping especially when you've split the views.
• Having a close button gives a User an exit, when they're not familiar with keyboard shortcuts.

[pilattebe]

To be fair:

• [x] being configurable, for left or right positions [Kinda]
• [x] manually sortable with drag-and-drop [You can reorder them however you like using drag-and-drop]
• [x] it doesn't stay on-screen [it does if you put it in the side panel opposite to side bar]
• [x] A Tab is a UI that is linked to an area currently being viewed. [It is clickable and right clickable just like tabs]
• [x] The current tab stands out more than it's siblings [It does]
• [x] Users can easily position/order a Tab based on their preference/need [You can order them however you like]
• [x] Since the tabs are linked to the Editor, there's a visual grouping especially when you've split the views [they are grouped]
• [x] Having a close button gives a User an exit, when they're not familiar with keyboard shortcuts [There is a cross to close]

[the0neWhoKnocks]

@pilatte

• I'm aware of Open Editors capabilities, and have implemented custom styling in the past to get it closer to vertical tabs as I could, but it was still clunky since I had to use the Custom CSS and JS Loader plugin to do so.
• My previous comment was in regards to Tabs as a UI and visual language. Tabs are visually linked to editor groupings, and generally easier to cognitively and visually navigate.
• Tabs are present on initial load of the App (unlike Open Editors which takes some hunting if one is not familiar).
• The "grouping" of editors is fine if the view is split once, but when split multiple times mixed with horizontal and vertical splits can be confusing since the group names aren't displayed anywhere and can be even more confusing if you have the same tab split since you just have a bunch of "group #" with the same file name listed. Where as with Tabs, the "linking" I was referring to was not functionally, but visually.

At the end of the day, it's about preference. Personally I prefer tabs (for the reasons I and others have outlined), and if folks prefer to use Open Editors, more power to them. That said, this is a feature request ticket for vertical tabs and any further discussion should remain on that topic. If I took my car into a mechanic to get it fixed and they replied with "why fix the car, how about you just take the bus instead", sure that's an option, but it is not what's being requested.

[pilattebe]

I would also prefer true vertical tabs, I was just pointing out that most of the feature listed have already been looked into by VSCode devs when they did the Open Editors. I didn't know if you knew all the feature packed into Open Editors which might be a suitable alternative for people in the mean time until vertical tabs become available.

[giorgiobeggiora]

Why is so difficult to add true vertical tabs? I really can't understand.

[Eunoseer]

I usually work with the open editors, explorer, find, etc. collapsed. Only expanding them when I need to do a global search or walk the tree in the file explorer. Unfortunately I can’t have everything collapsed on the right AND a non-collapsed open editors list.

Typically I also work with 10+ tabs open to switch between different levels and parts of a system. I also typically lose tabs amongst the multiple rows of tabs at the top.

Having a vertical list of tabs would solve this for me.

[bstst]

Why is so difficult to add true vertical tabs? I really can't understand.

The layout in there is quite complicated, and the Tabs are currently very bound to the Editor area, so extracting them is quite painful, as a complete refactor of the layout would be needed, also there are other components IN the tabs which would need to be extracted to a separate section of the layout. I imagine that is the main reason it's not yet done.

[anoushk1234]

Open Editors can now be pinned on the side since 1.64 (January 2022).

Is the issue closed or is there any important missing feature in Open Editors right now ?

Vertical tabs like this https://github.com/microsoft/vscode/issues/108264#issuecomment-884353123

[vlascik]

Why is so difficult to add true vertical tabs? I really can't understand.

The layout in there is quite complicated, and the Tabs are currently very bound to the Editor area, so extracting them is quite painful, as a complete refactor of the layout would be needed

Several people did this already, with < 1 page of CSS. No reason VS Code couldn't start there, and think about refactoring later.

[mindplay-dk]

Since we have the Open Editors now, and if we agree they are functionally equivalent to vertical tabs, what we need may be an option to "display as vertical tabs", e.g. change the styling and mount it on the left side of the editor view.

Is that possible, or is there another missing feature, in terms of being able to add side panels to the sides of the editor view?

[anoushk1234]

@pilatte chekcout this repo https://github.com/cmmdmx/vscode-vertical-tabs , its possible and with some more polish it can be production ready

[mindplay-dk]

@anoushk1234 still requires the "Custom CSS and JS" plugin though, yeah? (looks promising though.)

[mindplay-dk]

@DRD161 these aren't vertical tabs - scroll back through the thread, where this option has been suggested and rejected repeatedly.

[LucaSorvillo]

is there any news?

[anoushk1234]

what if we just fork it and add it ourselves?

[LukeTowers]

After reading through this thread I've applied the following settings to my VSCode to achieve the result I was looking for which is basically vertical tabs (but slightly better because the extra functions in the Open Editors pane is pretty nice).

{
    "workbench.sideBar.location": "left",
    "explorer.openEditors.visible": 40,
    "explorer.openEditors.sortOrder": "alphabetical",
    "workbench.editor.showTabs": false
}

I then moved my Open Editors pane into the Side Panel on the right and I have the following result:

[ManuGraiph]

I'd like to ask what the status on this. It has been almost 2 years since it was suggested...

[LukeTowers]

What's the difference between what you're looking for and what I posted above @ManuGraiph?

[LucaSorvillo]

@LukeTowers I'll answer your question: it's not an official tool, there should be a flag or something in the vscode settings

[LukeTowers]

Meh, that's probably why there hasn't been any progress on it. Anyone who actually cares enough will just make the 4 required settings changes and then move on to more important things.

[bstst]

Meh, that's probably why there hasn't been any progress on it. Anyone who actually cares enough will just make the 4 required settings changes and then move on to more important things.

Anyone who actually cares will not be satisfied with what these four settings achieve. That is not the same as tabs. People want these tabs on the side.

The layout in the editor UI code is crazily overcomplicated, that is why this feature is not yet implemented. Some time in the past there were technical decisions made which were not flexible enough and created this situation.

Ignoring the past — moving these tabs to the side is not as easy as changing a couple of css lines. There are numerous widgets and configurations and flows and corner cases which need to be accounted for.