Visual Studio Code: How to split the editor vertically

Question

In Visual Studio Code, a while ago, when I used menu 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 menu View → Split Editor, it always splits horizontally. (One file on the top and one file on the bottom.)

How can I split vertically?

Just open several files, then grab the tab of a file and drag it around the VS Code window - where you see the greyed out area is where the file will end up, you can split as many times both horizontally and vertically as you have screenspace. — Matty, May 28 '23 at 08:14

score 512 · Accepted Answer · edited Aug 09 '21 at 16:38

512

Change editor split layout from horizontal to vertical

In 1.20

ALT+SHIFT+0 PC (Windows, Linux)
⌘+⌥+0 Mac

Pre-1.20

ALT+SHIFT+1 PC (Windows, Linux)
⌘+⌥+1 Mac

In 1.25

You can split editor into Grid layout. Check View=>Editor Layout
It is nicely presented in Release notes v1.25: VS Code grid editor layout

In 1.58.2 **

** Someone update this with the lowest version where this became true.

The menu entry with the shortcut given above is View=>Editor Layout=>Flip Layout
The Command Palette entry is labeled "Toggle Vertical/Horizontal Editor Layout"

The settings entry is

{
  "key": "alt+cmd+0",
  "command": "workbench.action.toggleEditorGroupLayout"
}

edited Aug 09 '21 at 16:38

Bruno Bronosky

66,273
12
162
149

answered Nov 20 '16 at 21:15

v-andrew

21,939
6
36
41

115

BTW, it is in `View` menu. Look at `Toggle Editor Group Layout` just below `Split Editor`. – v-andrew Nov 20 '16 at 21:16
23

Note that this is NOT a method of having both horizontally and vertically split windows; VSC does one, or the other, but can't do both at the same time. – Daniel Griscom Jan 30 '17 at 15:09
And for a unix based OS? I tried in ubuntu with no luck. – gabrielAnzaldo May 09 '17 at 14:07
6

@gabodev77 Check in menu `View->Toggle Editor Group Layout` – v-andrew May 09 '17 at 23:19
2

`Alt+Shift+1` works for Linux Mint (which is Ubuntu based). – Jack Steam May 11 '17 at 16:01
6

How to undo 'splitting view'? – duong_dajgja Sep 11 '17 at 12:54
@v-andrew Actually I usually open several different files per side so I may have to drag file by file from right to left, e.g., it takes time. I am looking for some way to do that all at once. – duong_dajgja Sep 11 '17 at 13:48
Very nice feature to split horizontal (for long file) and vertical (for wide file). After setting what split, I wish they can make it intuitive like other Windows app including VS itself, in which I was positioning my cursor to the upper right corner hoping to see a spliter.... – Jeb50 Oct 29 '17 at 22:34
2

Seems to have changed to `Cmd+Option+0` on v1.20 OS X – Yeray Diaz Feb 10 '18 at 19:42
Note that this shortcut is relevant only _after_ the editors are already split. So you first need to do `Alt+Shift+1` and then `Alt+Shift+0` would toggle between vertical and horizontal split back and forth. – Boaz Feb 22 '18 at 23:41
@DanielGriscom in version 1.27.2 you can combine vertical/horizontal editor layout, having any combination of multiple columns in each of multiple rows. – Rodrigo García Oct 10 '18 at 18:47
Wondering why can it do the Word or VS way? Give us a splitter thumb in the top right, we can drag and open, lot more intuitive than config this and that. – Jeb50 Jan 26 '19 at 23:48
And to switch between them, use `Ctrl+1`, or `2` or `3` (`⌘` in mac). – Minh Nghĩa May 06 '21 at 06:40
why would they change this so often.. – LuckyLuke Skywalker Dec 22 '22 at 14:39

score 212 · Answer 2 · answered Mar 06 '17 at 22:16

212

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.

answered Mar 06 '17 at 22:16

Lance U. Matthews

15,725
6
48
68

Question... when I have a file open and I go to split the screen the same file I have open gets added to the new panel. Is there a way to just have it split without the same file or no file at all? – TikaL13 Aug 31 '17 at 19:59
@TikaL13 Searching through the settings I don't see any customizations for Split Editor mode. It doesn't allow a pane with no open tabs (it reverts to a single pane when the last tab it closed), so it's got to open _something_ when the new pane is created and it defaults to another view of the current file. You can drag tabs between panes or open another file (the file will open as a new tab in whichever pane is active) and then close the initial tab of the second pane. – Lance U. Matthews Aug 31 '17 at 20:32
1

Yeah, I was hoping it would function very similar to Sublime. I think I saw somewhere that this feature or fix would probably be included in the next release? – TikaL13 Sep 05 '17 at 21:40
Although, I don't know how to change the "default" but for later [releases](https://github.com/Microsoft/vscode/issues/14909#issuecomment-393870565) I should hold onto `alt` when clicking on the `split editor` to toggle between the vertical and horizontal. – pulkitsinghal Feb 05 '19 at 20:08
My workaround was to set `workbench.editor.closeEmptyGroups: false` (as suggested below) and then just routinely close the "same file" at once and then open empty tab or the file I wanted to open there. – jvalanen Apr 21 '23 at 09:41

score 52 · Answer 3 · edited Jan 08 '21 at 14:08

52

To split vertically:

⌘+\ Mac

command: workbench.action.splitEditor

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

⌘+k+⌘+\ Mac

command: workbench.action.splitEditorOrthogonal

edited Jan 08 '21 at 14:08

Shadoath

720
1
15
31

answered Apr 25 '19 at 12:09

flurdy

3,782
29
31

Is there any shortcut to "unsplit"? – Udayraj Deshmukh Jul 18 '19 at 06:33
1

Currently using `⌘`+`w`, though it needs to be done for each file. – Udayraj Deshmukh Jul 18 '19 at 06:34
4

`⌘` + `w` works if you want to close one of them. `⌃` + `⌘` + `→` or `←` works if you want to just move it – flurdy Jul 20 '19 at 09:03
1

Thank you, these keys worked for me, using vscode v1.47.3. The top answer on here wasn't working, assuming keys changed with newer versions – philip yoo Aug 06 '20 at 23:31

score 19 · Answer 4 · answered Feb 01 '22 at 01:58

19

Method 1

Method2

View -> Command palette -> type 'split'

Method3

Method4

Tip

Add a Keyboard Shortcut for split Editor

answered Feb 01 '22 at 01:58

lava

6,020
2
31
28

score 11 · Answer 5 · answered Feb 28 '18 at 16:57

11

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

answered Feb 28 '18 at 16:57

Marina

1,682
1
20
25

1

For some reason the key combo of ALT + Shift + 1 isn't working for me. This works though. Thanks! – Martyn Chamberlin Mar 30 '18 at 20:58

score 8 · Answer 6 · edited Jun 20 '20 at 09:12

8

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 18 '18 at 12:32

Balaji Ravichandran

318
3
12

score 7 · Answer 7 · answered Jul 20 '19 at 04:20

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.

score 5 · Answer 8 · answered Feb 20 '19 at 13:28

5

Simply in windows

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

answered Feb 20 '19 at 13:28

Saher Elgendy

1,519
4
16
27

score 4 · Answer 9 · answered Feb 12 '18 at 15:34

4

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.

answered Feb 12 '18 at 15:34

PET3R

43
1
4

score 4 · Answer 10 · edited Sep 01 '21 at 07:44

4

Use Move editor into Next Group shortcut:

Mac: ^ + ⌘ + Right/Left arrow

If you want to change shortcut:

Open Command Pallette (macOS keyboard shortcut: ⌘ + Shift + p)
Select Preferences: Open Keyboard Shortcuts
Search View: Move editor into Next Group

edited Sep 01 '21 at 07:44

Audwin Oyong

2,247
3
15
32

answered Nov 01 '19 at 11:41

ogelacinyc

1,272
15
30

score 4 · Answer 11 · answered Sep 20 '21 at 05:04

4

Right-click on the tab that you want to split it into another screen.
Then choose whether you want to split it (up-down | right-left).

I find this is the quickest way, and You can split it to as many screens as you want.

answered Sep 20 '21 at 05:04

Ahmed Osman

126
1
7

score 4 · Answer 12 · answered Oct 14 '21 at 17:38

The best way is to configure the VSCode settings to make the default behavior the way you want:

Split Editor (to a new editor group)

"workbench.editor.openSideBySideDirection": "right" // left/right (default)
"workbench.editor.openSideBySideDirection": "down"  // up/down

Split Editor in Group (does not create new editor group)

"workbench.editor.splitInGroupLayout": "horizontal" // left/right (default)
"workbench.editor.splitInGroupLayout": "vertical"   // up/down

Gaoping · Answer 13 · 2019-01-28T18:37:55.600

3

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.

edited Jan 28 '19 at 18:37

answered Jan 18 '19 at 19:52

Gaoping

251
3
5

score 2 · Answer 14 · edited Sep 20 '17 at 16:14

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

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