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: #75749
28 upvotes: #85527
4 upvotes: #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

github-where-the-world-builds-software-github-personal-microsoft-edge-202_6ZFY948O.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?

[JodokF]

Is it possible to configure the vertical height of the Open Editor tabs? They are too small for me...
Judging by this issue from 2.5 years ago, there isn't...

[WilmarE]

Thank

[alanxp]

#108264 (comment)

@JodokF, that's irrelevant to this issue.

Thank you

[huyz]

@625781186

What's the fuck ? 4 years have passed and it still hasn’t happened ?

PRs welcomed

[zezba9000]

What's the fuck ? 4 years have passed and it still hasn’t happened ?

vscode really isn't an IDE as it has no way to extend new proj templates in an appropriate way with full UI features or extend the text editor without reinventing the wheel I'm guessing in many aspects. It also has no UI for lang specific settings in the way someone might want and the endless fragmentation in the launch.json or in .vscode folder in general is something I should never have to touch in an IDE (like .vs, .idea, folders etc). As these are environment IDE config files that shouldn't be pushed to Git yet they are so verbose you might want to. I'd honestly just support Rider IDE at this point. MS discissions around IDEs seems to be driven my TS/JS devs who forgot what an actual lang needs in this space. Thats my feeling at least.

Its really sad to. I can go back to old Ubuntu versions and install MonoDevelop which was a fully featured C# IDE + many other langs done correctly (C/C++ is way easier to get working in MonoDev). MS basically bought competition then shut it down. I've followed this for so long I've heard all the excuses.

At the end of the day if you want to get work done outside Windows, use Rider. MS is really just doing IP damage at this point IMO when it comes to IDEs. C# as a lang luckily has been better managed.

For example just look how nice this was 10 years ago for C#, C++, Python etc. Its an actual GPL fully features IDE. And MS killed it. Its very very annoying.

[625781186]

@625781186

What's the fuck ? 4 years have passed and it still hasn’t happened ?

PRs welcomed

No, This is what the official should implement !

[huyz]

@625781186

No, This is what the official should implement !

How much did you pay for the customer support you're demanding? You should either contribute money or code.

[625781186]

@625781186

No, This is what the official should implement !

How much did you pay for the customer support you're demanding? You should either contribute money or code.

I choose not to use vscode .

[Slion]

The Explorer side Panel has an Open Editors section which is basically vertical tabs.

[TannerPlauche]

* Change the .vscode/settings.json
* Select View > Appearance > Secondary Side Bar
* Use the Command Pallette (Ctrl + Shift + P) to "Focus on Open Editors View" to get the view to appear in the Primary Side bar
* Drag that view into the Secondary Side Bar.

Thanks. This gave me the closest vscode experience to what I want. I also agree that this feature should be implemented. My whole team uses vscode, so I use it out of convenience and team-continuity. This aesthetic feature would make navigating open files much easier.

[JeremyTBradshaw]

Yes please to vertical tabs!

[Davidos533]

We need it, when opened very many tabs, left side tabs position is comfortable!

[goulashsoup]

4 years open, and no progress...

[alanxp]

4 years open, and no progress...

And they wont do it..

They think that they already added vertical tabs since they have like recent tabs on vertical, but they dont understand that if we make a group of tabs in another window within the same proyect, we wont have the vertical tabs that window.

Thats the problem, that they dont really understand the need of vertical tabs.

I hope they do, it would be an awesome feature and a must have

[ofek]

This feature is a critical accessibility concern for me. I have a severe neuromuscular disorder (SMA) and all I can use is a mouse. Using the mouse is quite strenuous so I try to rely on key bindings on my on-screen keyboard where I can to avoid having to move the mouse a lot. With many horizontal tabs I have no choice but to cycle through them sequentially to target the one I want, having to maintain a mental model of a long list. Here's an example (turn sound on):

recording.mp4

With vertical tabs there is much less of a cognitive burden because one is able to see the most proximate 30-40 tabs rather than only ~10 or less. Additionally, I can not only cycle through them more efficiently but I can target them more easily with voice commands to move the mouse to specific areas on the screen or even use AI that is able to see what I see.

The proposed workaround to use the Open Editors view in lieu of tabs is insufficient for the following reasons:

1. Visually they are not tabs but rather a simple list of files plus a very small icon, this causes eyestrain just as much as having to quickly cycle through dozens of tabs sequentially (luckily I don't have epilepsy)
2. Files with the same base name don't expand to include more of the path so there are duplicate entries without context until you go to it
3. The list of files is global rather than per editor as one would expect to reduce clutter and have logical groupings
4. The default location is underneath the file explorer which means it competes for visual space with the contents of the directory/repository
5. In order to get more visual space you have to enable the secondary side bar and drag the editors over there (remember moving around the screen is difficult let alone clicking while doing so)
6. If you do utilize the secondary side bar there is no way to move that between the file explorer and the editors so you have to look at the directory structure on one side and "tabs" on the other

[rrmistry]

I wanted to update this thread regarding vertical tabs implementation. After discussing this feature with the Theia IDE community (eclipse-theia/theia#13974), I've submitted a formal feature request in their repository: eclipse-theia/theia#13979

Given Theia's high level of API compatibility with VS Code, I'm seriously considering switching to Theia if they implement vertical tabs. I believe many developers here might feel the same way.

If you're as eager for vertical tabs as I am, I encourage you to show your support by upvoting the Theia issue. A strong show of interest could accelerate the feature's development and potentially influence other IDEs (including VS Code) to reconsider its implementation.

This could be a significant step forward for those of us who've been advocating for vertical tabs. Let's show there's real demand for this feature across the developer community.

Thank you for your continued interest and support on this issue!

[ardeal]

how about this feature?
is it implemented in the latest vscode?
:)

I have been waiting for this feature for around 2 years: Move editor tab of vscode to left side

[teub]

@vscode-triage-bot vscode-triage-bot assigned bpasero on Oct 7, 2020
@bpasero bpasero added feature-request workbench-tabs labels on Oct 8, 2020
@bpasero bpasero removed their assignment on Oct 8, 2020

=> maybe the reason why there is no development on this issue despite the massive user demand is that it is unassigned ?

[call0fcode]

After doing a bit of research I finally have found what I think is the best approach.

This extensión allows you to group tabs vertically and the do not display with the "annoying" long path on the right side of the filename.

https://marketplace.visualstudio.com/items?itemName=jiapeiyao.tab-group

Groups can be named and sorted.

Additionally tabs can be hidden or just show the one you're working on (VSCode appearance options can do it).

[CoolCmd]

@call0fcode Turn tabs to a copy of Explorer with a lot of manual work? Thanks, no.

[steamhammer]

@call0fcode

After doing a bit of research I finally have found what I think is the best approach.

thanks for sharing it. Looks pretty nice for me. Especially when placed in the secondary sidebar apart form Primary one with the project folders explorer. The only thing I am missing now - is the possibility to let the Primary and Secondary sidebars sit on the same side of the vscode. Like this

┌──────────────────────────────────────┐
│ Title + Breadcrumbs                  │
├──────────┬────────┬──────────────────┤
│ Explorer |  Tab   │   Editor space   │
│          │ Groups │                  │
│          │        │                  │
│          │        │                  │
│          │        │                  │
│          │        │                  │
└──────────┴────────┴──────────────────┘

Doesn't seem to be a complex task to implement for monaco editor. Unfortunately it could not be fixed by user styles, since the sidebars and editor space are resizable and its' widths are calculated based on user input.

[github-account1111]

VS Code already has vertical tabs in the sidebar by default. Maybe you disabled them by accident.

Come to think of it, the horizontal tab bar is redundant. I just went ahead and disabled it.

Yes, you can't see them when you search, do source control, install extensions, etc., but do you really need to see both of those at once?

[ChristopherHaws]

Another extension which adds vertical tabs is Better Open Editors. I tend to keep it docked to the right side of my workspace and keep the standard explorer on the left side. Works pretty well, but still not as nice a Visual Studio 2022's vertical tabs.

Here is a picture of my setup:

[oz-p]

Also add the ability to place the tabs at the bottom - I use vscode in full screen on a mac and all day long I'm fighting with the top menu that keep showing up every time I move the mouse to the upper side of the screen to change the tabs. The menu is hiding the tabs and so the result is that a lot of times when I want to change a tab the very action of moving the mouse to that tab is hiding it (with the menu)... Can't be that I'm the only one who's facing that issue daily.
If I could move the tabs to the bottom of the editor area I won't have the menu bar hiding the tabs (but it needs to be above the status bar, not all the way at the bottom of the window since then if it will be at the very end of the screen it will collide with the mac dock that shows up in full screen and then the problem is the same).

I would've open a new request but I saw that there was already a request for that (65193) which was marked as a duplicate of this request.