Has anyone found a way to have more complex pane layouts in Visual Studio Code, like those supported by Origami for Sublime? Layouts beyond splitting on the same axis are something that I really miss from Sublime.
There are several advanced keyboard shortcut to fold/unfold code blocks in VSCode, although I personally don't use them very often. Toggle Fold (Ctrl+K Ctrl+L) folds or unfolds the region at the cursor.
Use Shift + Click on the folding icon to fold or unfold the region and all regions inside. You can also use the following actions: Fold (Ctrl+Shift+[) folds the innermost uncollapsed region at the cursor. Unfold (Ctrl+Shift+]) unfolds the collapsed region at the cursor.
Zen mode is a feature in a VS Code that hides all UI (Status Bar, Activity Bar, Panel, and Sidebar) and displays only the editor on a full screen. Zen Mode.
Press Esc twice to exit Zen Mode.
like @pat-putnam says, VSCode now supports editor window splitting 🎉
To replicate the Origami experience, we need the Origami keyboard shortcuts too. To do this, paste the JSON snippet shown below into your VSCode keybindings.json
.
You can quickly open keybindings.json
in VSCode by pressing cmd+shift+p
and then typing keyb
and clicking the Preferences: Open Keyboard Shortcuts (JSON)
completion hint that appears.
[
{
"key": "cmd+k up",
"command": "workbench.action.splitEditorUp"
},
{
"key": "cmd+k right",
"command": "workbench.action.splitEditorRight"
},
{
"key": "cmd+k down",
"command": "workbench.action.splitEditorDown"
},
{
"key": "cmd+k left",
"command": "workbench.action.splitEditorLeft"
},
{
"key": "cmd+k up",
"command": "-workbench.action.moveActiveEditorGroupUp"
},
{
"key": "cmd+k right",
"command": "-workbench.action.moveActiveEditorGroupRight"
},
{
"key": "cmd+k down",
"command": "-workbench.action.moveActiveEditorGroupDown"
},
{
"key": "cmd+k left",
"command": "-workbench.action.moveActiveEditorGroupLeft"
}
]
Note that if you have existing key bindings that you want to preserve, you should remove the [
and ]
from the JSON snippet and just paste the config objects into your existing array.
These custom keybindings are for the editor-window-splitting functionality from Origami that I use most often. There are a few more Origami keyboard shortcuts beyond these four. It would be cool in the future to create a VSCode keybinding file that fully replicated the Origami keyboard shortcuts, and then release that as a VSCode keymap. Future work.
I recently revisited Visual Studio Code and found that you can now window split to your hearts content. Simply right click on any pane and select the appropriate split action.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With