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
Now you are able to pin/unpin tabs using shortcuts and show it in a separate row!