[VScode][MacOS] vscode pinned tabs in a separate row

Ruka

3 min readAug 2, 2022

thanks for the help from pavlexander
- Ruka 2022.08

Step 1: Install plugin `Custom CSS and JS Loader`

Go to extension > search for Custom CSS and JS Loader > Install

Step 2: Create css file

create a css file and copy the full file path

ex: /Users/ruka_lin/Documents/settings/vscode_custom.css

.tabs {height: auto !important;}.tabs .tabs-and-actions-container {height: auto !important;}.tabs .tabs-and-actions-container .monaco-scrollable-element {height: auto !important;}.tabs-container {display: flex !important;flex-wrap: wrap !important;height: auto !important;flex-direction: row !important;justify-content: flex-start !important;align-content: flex-start !important;}.tabs-container::before,.tabs-container::after {content: "" !important;width: 100% !important;order: 1 !important;}.tab {display: flex !important;}.tab:not(.sticky) {order: 1 !important;}/* for some reason sometimes last tab is stretched 100%. This is a fix. */.tabs-container .tab.last-in-row:not(:last-child) {flex-grow: 0 !important;}

then copy the file path, we’ll need it later.

Step 3: add setting to settings.json

Open vscode settings.json by pressing ⌘+⇧+P (or ctr+shift+P in Windows), search for Preferences: Open Settings (Json)

add these keys into the json

{
  "workbench.editor.wrapTabs": true,
  "git.decorations.enabled": false,
  "workbench.editor.decorations.badges": false,
  "workbench.editor.decorations.colors": false,
  "vscode_custom_css.imports": [
   "file:///Users/ruka_lin/Documents/settings/vscode_custom.css"],
  "vscode_custom_css.policy": true
}

where the string in vscode_custom_css.imports is the URL version of your path to css file, by adding file:// as the prefix of your file path

Step 4: Activate CSS

Activate command “Reload Custom CSS and JS”

pressing ⌘+⇧+P (or ctr+shift+P in Windows), search for Reload Custom CSS and JS , click it then press the restart visual studio code in the notification pop up.