Multirow Tabs for VSCode

Question

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 th

Answer 1

That "work in progress" link provided refers to the Visual Studio IDE, which is separate from VSCode. The latest I've seen on this issue is found on the VSCode project's Github page, which essentially said it is not a planned feature for 2018 and closed the issue.

I'm not a fan of having to Ctrl+Tab or scroll through the tab menu either; the only other option I've come across so far is to use the "Open Editors" list:

Without Tabs, the OPEN EDITORS section of the File Explorer is a quick way to do file navigation.

This requires using the mouse, but then so would taking advantage of a multi-row tab layout. You can resize it to give you more space and reorder the tabs if desired.

Answer 2

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

Answer 3

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.

Answer 4

I just played with the vscode developer tools console, and looks like this CSS will be enough to do that if incorporated with an extension:

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

You can add this code to file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css file to use it until your application updates.

Note: When you add this to workbench.main.css file, VSCode will alert that the integrity of VScode is corrupted, ignore that message. VSCode will function as before because it's a CSS change (if any javascript doesn't use some positions of the tabs, or something else).

Otherwise as @Bene said, this is a restricted area by VSCode development team. They say:

Restrictions

There are certain restrictions we impose upon extensions. Here are the restrictions and their purposes.

No DOM Access

Extensions have no access to the DOM of VS Code UI. You cannot write an extension that applies custom CSS to VS Code or adds an HTML element to VS Code UI.

At VS Code, we're continually trying to optimize use of the underlying web technologies to deliver an always available, highly responsive editor and we will continue to tune our use of the DOM as these technologies and our product evolve. To ensure that extensions cannot interfere with the stability and performance of VS Code, and that we can continue to improve the DOM of VS Code without breaking existing extensions, we run extensions in an Extension Host process and prevent direct access to the DOM.

@ https://code.visualstudio.com/api/extension-capabilities/overview#no-dom-access

Answer 5

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.