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
santiagopuentep
All 15 comments
This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
vscode-triage-bot
on 8 Oct 2020
:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
vscode-triage-bot
on 9 Oct 2020
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.
orange4glace
on 23 Oct 2020
I think that looks great.
Two more ideas:
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.
When splitting the editor, to be able to configure vertical tabs or horizontal tabs in each section separately.
santiagopuentep
on 23 Oct 2020
- 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.
orange4glace
on 23 Oct 2020
I don't have that option here. How do you activate it? I have Folders, Outline, Timeline, NPM Scripts in the Explorer panel.
santiagopuentep
on 23 Oct 2020
Simply right click on any list header will show context menu for toggling it.
orange4glace
on 23 Oct 2020
Maybe it's an extension you have?
santiagopuentep
on 23 Oct 2020
Weird. It's a built-in functionality since many years ago.
orange4glace
on 23 Oct 2020
@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?
gjsjohnmurray
on 23 Oct 2020
@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
on 23 Oct 2020
Found it. "explorer.openEditors.visible": 1 solved the problem.
santiagopuentep
on 23 Oct 2020
@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
on 23 Oct 2020
@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.
santiagopuentep
on 23 Oct 2020
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.
gjsjohnmurray
on 23 Oct 2020
Related issues
trstringer
·
3Comments
philipgiuliani
·
3Comments
chrisdias
·
3Comments
ryan-wong
·
3Comments
villiv
·
3Comments
Most helpful comment
:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!