Horizontal and vertical split

[stevencl]

We need to design an experience that allows layouts to be split horizontally and vertically

Related to #224

[stevencl]

We have some early designs for this experience that we would like to share. If you are interested in reviewing these designs with us, please join us on Tuesday 30th August at 16:00 BST on this Google Hangout:
https://hangouts.google.com/call/ez36wxxp35cr3g77rlbuv3mho4e
We will share our designs and ask for your comments and feedback.

[stevencl]

Thanks to everyone who joined the conversation yesterday to discuss the designs for enabling horizontal split.

We discussed two main design decisions:

• To begin with, we will only support horizontal or vertical splits, not a combination of both. This means that it will not be possible to split one editor horizontally and another vertically. We are doing this as it allows us to more easily introduce vertical splits given the current design. We currently support a maximum of three editor groups and place a button beside the group to allow the user to split this group. If we want to allow a mix of horizontal and vertical splits we will have to reconsider the way that we support splitting editor groups since we need to allow the user to choose which way to split.

Before we go down that path, we want to take this initial step of supporting horizontal editor groups within the current design. We will continue to monitor feedback and usage to determine if we should provide more flexible support for a mix of horizontal and vertical editor groups.

• We propose to place a button on the open editors header area that will allow the user to choose the orientation for each split. See the screenshot below:
  

When the user interacts with this drop down they can choose the orientation that they want to split the editor. The split button on the top right changes in accordance with this toggle so that when the user presses the split button, the editor groups will split according to the orientation selected.

Here are some examples of how things might look with horizontal editor groups.

• Viewing a diff editor
  
• Debugging (note the debug console at the bottom)
  
• Three horizontal editor groups with the debug console visible
  

[mlaventure]

I was looking again at VSCode today, and this is really one of the last reason why I haven't switched to using Code. Given that I work on a 4K display, I tend to use a 4 way split when working.

Was the idea of this feature definitely abandoned?

[stevencl]

No, this wasn't definitely abandoned. This is an initial step. We wanted to get this design working first, and then see if we need to take the next step to enable horizontal and vertical splitting.

[InKiev]

I hope this arrangement support be available soon, I use two 27" for my daily working day and this kind of arrangement is something that is very useful to me, on the upper side I would like 2-3 editing spaces and below one that is my TODO tracking list(usually we have to test and make our task list of task/bugs identified), also, the layout is limited to only 3 work spaces, would be nice to remove that limitation, make all the work spaces that you want/need.

You guys are doing an excellent job with VS Code, keep going.

[doppl3r]

Any updates on this feature @stevencl? I'm dying to have this haha

[vviikk]

To be honest, I just love the simplicity of vscode, using Cmd+1/2/3 to get to a maximum of three panes. I guess that mapping is the most intuitive I've had. Maybe, just maybe, we can allow horizontal splits inside the vertical panes. I.e. so we have a layout that can be like

+-------+------------+---------------+-----------------+
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            +---------------+                 |
||      |            |               +-----------------+
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      |            |               |                 |
||      +------------+---------------+-----------------+
||      |         **debug**                            |
||      |                                              |
||      |                                              |
+-------+----------------------------------------------+

And jumping to the pane you need would be Cmd+Shift/Ctrl+Shift+1 - a nice derivation of the commands now. I think we should look at simple panes like tmux does, rather than Vim or Atom. But:

If we are in the default vertical mode, we only allow one horizontal spit per pane - and no more h/v splits. Vice-versa for horizontal mode. Keep vscode simple :) Don't be Atom.

[aadamsx]

Why has this feature been closed without being implemented?

This is a big, important, critical feature and the last one I can find that Atom has but VSCode does not.

Just implement split view (both horizonal/vertical at the same time) just as Atom -- they did a great job IMO.

As someone said above, this is the only reason I don't use VSCode over Atom -- as I have 2 - 32" - 4K screens and can easily accomodate both vertical and horizonal "windows" or "views" -- it's a must have feature.

[stevencl]

Thanks for the comments @aadamsx. This issue was closed because we implemented what we described (#5911 (comment)).

We understand the desire for VS Code to support more flexible layouts. However, we have a large list of items that we need to get done such as multi root. Many of these items have significant impact throughout the rest of the product so we make sure to take our time to do them properly.

Supporting more flexible layouts than we support currently is a large piece of work since there is some significant UX work required to make sure we get it right then engineering work to implement it. However, we're focusing on getting multi root done just now (this is a large effort) so we will not be able to devote attention to this in the near future unfortunately.

[jarodtaylor]

I have only been using VSCode for a week and I absolutely love it (coming from tmux/vim and Atom), but I definitely miss the ability to have multiple layouts when developing. Most of us are on massive 27" monitors. It's not going to stop me from using it, but it's bummer that we can't have both horizontal and vertical splits at the same time. Otherwise, this is a kickass editor. Great job, Microsoft.

[formspoint]

Yes, It is a huge oversight. It seems they have an issue implementing this due to the way they've structure they're project. Seems like a big oversight IMHO, and could be just one more sign of the lack of proper engineering on this project. Maybe Microsoft-proper needs to get involved.

[Neutrino-Sunset]

I think it would be useful to disambiguate between editor splitting and editor groups.

Conventionally splitting is when one editor tab is used to edit different locations in the same file or different files in the same editor. This is what VsCode does when you use --diff or open the edit settings view.

Editor groups are just that, opening different groups of editors.

My personal workflow is to open editors horizontally (side by side). Occasionally I may want to view two parts of the same file, which I do by splitting that editor vertically (one pane above the other). Splitting the file in the editor (as opposed to opening another vertical editor group) is a distinct useful feature because splitting one editor vertically does not half the height of all the other horizontally laid out editors you have open.

Suggesting that opening additional horizontal or vertical editor groups performs the same job as editor splitting is to completely misunderstand the problem. Suppose I have 4 editors laid out side by side and I want to split one editor vertically. If to do this open my file in another editor in a group below the existing editor group, then all the other editors in the first group are now halved in height.

This is why editor groups and editor splitting are two different things. Please implement them both :)

VsCode already has nascent support for editor splitting, that is the view that is used when you open two files using --diff, but it's not very useful because atm there isn't even a keyboard shortcut to switch focus from one pane to the other.