[visual-studio-code] VSCode: How to Split Editor Vertically

In Visual Studio code, a while ago, when I used View->Split Editor, it would split vertically. (One file on the left and one file on the right.)

I updated Visual Studio Code and when when I do View->Split Editor, it always splits horizontally. (One file on the top and one file on the bottom.)

How can I split vertically?

By default, editor groups are laid out in vertical columns (e.g. when you split an editor to open it to the side). You can easily arrange editor groups in any layout you like, both vertically and horizontally:

To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false:

There are a predefined set of editor layouts in the new View > Editor Layout menu:

Editors that open to the side (for example by clicking the editor toolbar Split Editor action) will by default open to the right hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.

There are many keyboard commands for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is a fast way to split the editor into any direction:

Keyboard shortcuts# Here are some handy keyboard shortcuts to quickly navigate between editors and editor groups.

If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.

??? go to the right editor.
??? go to the left editor.
^Tab open the next editor in the editor group MRU list.
^?Tab open the previous editor in the editor group MRU list.
?1 go to the leftmost editor group.
?2 go to the center editor group.
?3 go to the rightmost editor group.
unassigned go to the previous editor group.
unassigned go to the next editor group.
?W close the active editor.
?K W close all editors in the editor group.
?K ?W close all editors.

If you're looking for a way to change this through the GUI, at least in the current version 1.10.1 if you hover over the OPEN EDITORS group in the EXPLORER pane a button appears that toggles the editor group layout between horizontal and vertical.

Use Move editor into Next Group shortcut

Mac: ^+?+->

If you want to change shortcut,

Open command pallette

Mac: ?+shift+p

Select Preferences: Open Keyboard Shortcuts

Search View: Move editor into Next Group

To split vertically:

?+\ Mac

command: workbench.action.splitEditor

To split orthogonal (ie. horizontally in this case):

?+k+?+\ Mac

command: workbench.action.splitEditorOrthogonal

In version 1.23.1, it is Ctrl+Shift+P and Split Editor This will divide the screens vertically and you can move through them using Ctrl+K+LeftArrow

I just found a simple solution. You can drag an opened file and move towards the four sides of the Editor, it will show a highlighted area that you can drop to. It will split the view automatically, either horizontally, vertically, or even into three rows.

VSCode v1.30.2

Update: you can also drag a file from the Explorer to split the Editor in the same way above.

Simply in windows

ctrl + @ (the button 2 in the upper horizontal row of numbers in keyboard)

The key bindings has been changed with version 1.20:

SHIFT+ALT+0 for Linux.

Presumably the same works for Windows also and CMD+OPT+0 for Mac.

Press CMD + SHIFT + P (MAC) and search for Toggle Editor Group

To change the editor in Landscape and Vertical mode, follow the steps below.

1. For example, open two files that you have in your left or right side bar, depending on where you are placed. By default it is always on the left.

2. Now that you have both windows open, you have to use the key combination for PC (Alt + Shift + 1) for (Windows and Linux Operating Systems) or for MAC (Cmd + Option + 1), as commented here v-andrew.