Multirow Tabs for VSCode

I commonly have 10+ tabs open per editor window which makes it tedious to scroll back and forth (or use ctrl+tab) to find the file I want.

Is there any way to have the tabs wrap?

Similar to Atom's multirow-tabs.

Update: Looks like it is a work in progress.

Solution 1:

UPDATE Feb 2021: In-built support for tabs-wrapping in VSCode v1.53.0+

• Just set the workbench.editor.wrapTabs to true in the settings.
• I still use my configuration mentioned below to make tabs smaller as per my usage.

UPDATED 28 March 2020 for VSCode v1.43.2

• Fixed CSS for tab-close button
• Added CSS for smaller bread-crumbs and acion-bar (at the right of tab-bar)

I do the following for multirow tabs in visual-studio-code (until there is official support or an easier solution):

STEP 1: Install the extension VSCode Custom CSS. (Check out the extension page for proper installation instruction. It's a bit of a hack as VSCode does not officially support altering internal CSS.)

STEP 2: Create a CSS file (say, "/home/user/vscode/custom.css") and add the following contents:

/* Following CSS to wrap the tab-bar into multiple rows: */

.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;
}


/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */

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

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


/* Following CSS for smaller close button on tabs: */

.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;
}

.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {
    font-size: 12px;
}


/* OPTIONAL: Following CSS for smaller breadcrumbs (below tab-bar) */

.monaco-breadcrumbs {
    font-size:0.65em;
    opacity: 0.8;
    height:18px !important;
}
.tabs-breadcrumbs .breadcrumbs-control {
    height: 18px !important;
}
.monaco-workbench .symbol-icon.block {
    height: 8px;
    width: 8px;
    min-height: 8px;
    min-width: 14px;
    background-position: 50%;
    background-size: contain;
}
.breadcrumbs-control .monaco-breadcrumb-item:before {
    min-width: 12px !important;
    height: 12px !important;
    background-size: contain !important;
}


/* OPTIONAL: Following CSS for smaller action-bar (beside the tab-bar) with menu, split, etc. */

.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
    height: 20px;
    padding:0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-actions .action-label {
    height: 20px;
    line-height: 20px;
    min-width: 14px;
    background-size: 8px;
}

.tabs-and-actions-container > .editor-actions > .monaco-toolbar > .monaco-action-bar > .actions-container {
    max-width:60px;
    flex-wrap:wrap;
}

STEP 3: Point the extension to your custom CSS. Open the VSCode settings.json [Ctrl+Shift+P > "Open Settings(JSON)"] and add the following lines (with your path to custom.css file):

"vscode_custom_css.imports": [
    "file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true

STEP 4: Make sure you have gone through the VSCode Custom CSS extension's readme and enabled it properly. You may have to reload VSCode. Also, edit the CSS as per your preferences!

CREDIT: This solution (link to extension and the CSS to wrap tab-bar into multi-lines) was originally posted by Steven Laidlaw in this Github thread. I just extended the CSS for smaller tabs.

Solution 2:

Significant progress has been made on this issue Allow tabs to wrap to multi-line and the feature is now in the Insiders' Build (and presumably in v1.53 Stable as it works well in my testing):

As seen in the demo, you can even drag tabs from one row to another. There is currently no limit on the number of rows until the editor itself gets too small.

You enable this functionality with

workbench.editor.wrapTabs: true or

Workbench > Editor: Wrap Tabs in the Settings gui.

A couple of notes from testing tab wrapping:

• make sure you have configured workbench.editor.tabSizing: fit (this will make the last tab fill the entire row for a more homogeneous look when tabs wrap) [ed. note: you can still use shrink, it just doesn't look as nice]

• if the space for the editor or editor toolbar becomes too small, wrapping turns off automatically and turns on again when the size get's larger

• you can still drag and drop tabs around even when they wrap

• you can still pin a tab and it shows pinned in the beginning of the tabs

• when tabs wrap, the tab.border color is not only applied to the right of each tab but also below to separate tabs from each other

Also, depending on your color theme, consider modifying these settings:

"workbench.colorCustomizations": {

  "tab.border": "#fff6",
  "titleBar.border": "#fff6",
  "editorGroupHeader.tabsBorder": "#647c64",
}

to set off the borders of each tab.

There is some hope for a second row of tabs - albeit with pinned tabs but still sounds pretty useful. See Pinned tabs: show them in a secondary tab row above others. Added to the Backlog.

By the way, pinned tabs are coming to v1.46. More on their functionality: v1.46 release notes: pinned tabs

Solution 3:

UPDATE: Version 1.53 includes wrap tabs!

The new "Wrap Tabs" setting is a checkbox under File > Preferences > Settings > Workbench > Editor Management.

Alternatively, you can set paste the following into your settings.json: "workbench.editor.wrapTabs": true

Solution 4:

Since multirow tabs are still not officialy supported in VSCode, I wanted to bring a feature request to your attention that I just posted on their github. Instead of always wrapping tabs to a new row I propose to have them laid out on rows that are completely independent from each other. The user decides, they can mix short rows with long rows that still require scrolling. See the details here:

github.com/microsoft/vscode/issues/80510

My proposed solution certainly requires more work than unceremoniously wrapping tabs to a new row but in return it lets the user organize their tabs in a way that could increase productivity.