How to display multiple rows of tabs in VSCode on Mac

When you have many files open in VSCode, the tabs can often spread too wide horizontally, making it difficult to find the file you need.

↓ Like this

It is fine if they fit within the screen, but when you narrow the VSCode window width,
you have to scroll horizontally to find them.
*Note: While you can view them all at once via "OPEN EDITORS" in the left pane,
this also clutters the WORKSPACE file list, making that harder to view as a disadvantage.

In such cases, I will introduce a method to display file tabs in multiple rows as shown below.

Prepare an External CSS File

Create a CSS file in a folder of your choice.
In my environment, I created it at the following path:
"/Users/username/workspace/custom.css"

Save the file with the following content:

/Users/username/workspace/custom.css

/Users/username/workspace/custom.css

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

Install Extension Package

To load the CSS file created earlier into VSCode,
install the package vscode-custom-css in VSCode.

After installation, open VSCode's Preferences > Settings and add the following settings to your settings.json.
The key points are to write the file path for the external CSS as an absolute path and to prefix that absolute path with file://.

settings.json

settings.json

...
    "vscode_custom_css.imports": ["file:///Users/username/workspace/custom.css"],
    "vscode_custom_css.policy": true,
...

After entering this, press F1 (or Cmd+Shift+P) in VSCode to open the command palette,
type "Enable Custom CSS and JS," and press Enter to execute it.

Once executed, restart VSCode.
(A popup message saying "Your VS Code is corrupted" may appear after restarting, but it seems it can be ignored.)

Confirm Multi-row Display

Check that the tabs are displayed in multiple rows when many files are open.
Great job!

References

VSCode GitHub > https://github.com/microsoft/vscode/issues/70413
vscode-custom-css > https://github.com/be5invis/vscode-custom-css