[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.

Step 5: Done!

Now you should saw your changes when you pin your tab(editor).

right click the tab and click pin/unpin, or use shortcut.

Step 6: Edit your shortcut for pin/unpin tabs

pressing ⌘+⇧+P (or ctr+shift+P in Windows), search for Preferences: Open Keyboard Shortcuts

Search for View: Pin Editor and View: Unpin Editor, set the keybindings to what you like by double click the Keybinding column

Double click this

Now you are able to pin/unpin tabs using shortcuts and show it in a separate row!

Reference

--

--