Support a grid layout for editors

[Tekbr]

• VSCode Version: Windows 10
• OS Version: 1.7.0 - insider

-- Sorry for the English, I used Google Translator --

Leave even better drag and drop, detecting where we point out the window.(#224, #1749).

How does the Atom. I think it's more intuitive.

[bpasero]

@Tekbr what is wrong with our approach?

[Tekbr]

@bpasero I think it was not very clear. I'll try to explain better. Sorry for English

I enjoyed new in version 1.7, but it would be interesting to allow vertical and horizontal split at the same time.

As shown in the gif, three tabs. A vertical split, horizontal split at the same time.

Clicking a button (or use the shortcut) to change the orientation, it becomes a little boring.

Just as we drag the tab to the side it adjusts the window, dragging down, near the lower edge of this window to adjust, without the need to use "Toggle Editor Group Layout".

[nambrot]

I used the 👍 but wanted to provide verbal support for this usecase as well. I have a rather large monitor on which I use Sublime in a 2x3 grid which currently is not possible in VS Code as you have to choose between horizontal vs vertical.

[tomasiser]

After finally implementing #1749, this is another needed step towards making the workbench as flexible as in other editors (Sublime Text, Atom, vim, Emacs, full Visual Studio - they all support grid layouts). Especially on larger screens, it is very useful to use 2×2 or 1+2 grid layouts. Some people with very large screens tend to use even more crazy layouts, which can be useful when working on projects that have multiple related files (e.g. header files in C++).

Would be very lovely to have something like this in VS Code!

[Shahor]

I like to be able to split both vertically and horizontally and this is really missing here :(

Hopefully it will be implemented. This is the only major problem I have with vscode right now.

[mschwartz]

+1

I use WebStorm over VS Code for three reasons:

1) Can't split horizontally 2) vim emulation is mediocre (but thanks anyway, it makes it usable at all) 3) can't record keyboard macros

VS Code is really fast and I like that it's in JavaScript. It has soooo much potential. I'm sure it'll be my editor of choice when those things are implemented.

To be clear, here's a screenshot of WebStorm menu (what I mean by horizontal split):

[dgtlife]

For me, Atom has it perfectly ... split up/down ... split left/right ... and you can end up with 4 quadrants, or 2 on the left and 1 on the right, or 1 on the left and 2 on the right, or even more if you like ... each with its own set of tabs. A newly opened file goes into the section with focus at the time of opening. I currently use all three cases on my 4K monitor.

[wclr]

I wonder why it was not implement yet, or maybe VS team has some justifications against horizontal split?

[danwulff]

@whitecolor VSCode has horizontal split. You can enable it by pressing 'alt+shift+1' (toggles between vertical and horizontal splitting).

However, I would definitely agree that a grid layout allowing a mismash of horizontal and vertical windows is needed in VSCode. In my office, I'm the only person consistently using VSCode and one of the outstanding reasons is the lack of grid layout capability.

[wclr]

Right you can switch vertical horizontal, but can't use both, it is kind of strange.

[Shahor]

Is this going to be considered or should we just forget about it?

To be honest it is the only real bad thing I see about vscode right now, but I want to use it everyday and it's quite painful not to be able to. I understand that time is not infinite, but I don't see much happening here so excuse me if I'm being annoying by upping this but I'd like this discussion to continue further :)

[kieferrm]

Please see discussion in #9443.

[andradei]

@kieferrm You closed issue #9443 referring people to this issue. So can we assume this issue is the one that will track the grid layout feature?

[kieferrm]

@andradei yes.

[seanhealy]

Also would love this. Arbitrary grid splitting is pretty central to my workflow. I'd love to switch to Code as it's amazing in other places but, this keeps holding me back. 😄

[panzer-planet]

This is the number one reason some of my colleagues aren't on the vscode train

[malthe]

Definitely. It's an integral part of most emacs' users workflow to continuously redefine the buffer grid, using the C-x-<n> key combinations. I would say the number one use is to split once to obtain two views of the same buffer and quickly navigate to a different part for reference – and then often unsplit shortly after.

[medikoo]

I'm just trying to switch from Emacs, and not having that makes migration painful

[AAverin]

Wow. I hate this. Any time you start some new software, play around a little and find something annoying, you go to open an issue – but it was either just resolved to be released in the next version, or discussion have been just finished that it needs to be done. Anyways. Playing with React-Native, after Android Studio I really miss this splitting of screens

[ghost]

Agreed that we need to be able to split both Horizonally AND Vertically. Choosing 1 format over the other just isn't usable.

Might want to take a page from: https://github.com/SublimeText/Origami

[yosefrow]

This is one of the only features that I would miss if I left Sublime or Atom and is keeping me from using VSCode

For serious Coders or Authors who multi-task this is a required feature which should at least be supported in a plugin.

[edasaki]

I've always felt that 3 windows is far too skinny/short to see anything clearly, and grid layouts are a great way to mitigate the problem. When I need two reference files open it's a pain to get it usable in vscode right now :(

Here's a little picture to help visualize why grids are far superior to what we have right now (although it's probably already quite clear)

Hopefully this will be on the roadmap for the future!

[panzer-planet]

I need this so badly that I'd do it myself if I had time. Without this, VSCode is unusable for many developers. If this isn't available soon I'm going to have to move on because it's a basic feature developers have come to expect from every text editor.

[nicholaswagner]

👍

[eduncan911]

Coming from old-school VIM back in the 90s and early 00s, and VS since 00s for 14 years, Sublime and Atom w/VIM plugins for years... Trying to switch to VSCode and hit a serious roadblock with this limitation. Seriously, within like 30 minutes I hit this and was like... "Wait, seriously... I can't create a grid?"

VSCode is shaping up to be awesome. But it needs the grid layouts, for me anyways. If I didn't use grids, it would be my default editor.

MS mentioned in #1749 as the reason why (the layout and grouping, and key bindings).

But enough with the "design reviews" - just enable the features that all other editors have, and be done with it. If you have to break the infrastructure and groupings of tabs or whatever, make it a major version bump and tell everyone why. Done.

.NET Core already shows that MS is no longer in the "backwards compatibility" market, and is willing to break features going forward to evolve and simplify the product. I see no reason why VSCode can't follow the same pattern and break a few things to evolve to the level of other mature editors. To the community standards.

It's a serious limitation to not be able to:

:vs 
:vs 
:split

Translation to non-VIM gurus: it's an echo to the rants in this thread and in #1749 about not being able to split Vertically AND Horizontally - to form a grid-like editor.

It's so frustrating that I tend to just use VS code for lighting editing, and drop to a terminal for hardcore grid editing.

On my 4k 30", or on my Macbook Pro 15" Retina - I use the grid layout exclusively.

Undocking windows would be a big plus too. But right now, I still have to use [n]vim - so I have console open with tmux across my 3 three monitors for now and maybe a single VScode session for some prettiness on a single monitor - since VSCode doesn't support the 'grid layout' of horizontal and vertical splits at the same time.

[autoferrit]

I sort of agree with the above comment. Though I wouldnt just go in with a hammer and do it. If keybindings are the worry, fine. Have the features "available" with no bindings to start. Work that in later once you find a compromise and are able to rework the keymap. it doesnt matter to me anyways as I have a largely custom keymap as I do for most of my editors so they are all consistent with each other (to a point).

But if the feature were just working and available, and documented, I think people would still love that forward momentum. Make a separate PR to find out how to integrate that into existing workflows and keymaps.

[MikeGitb]

Is there any update on whether this will be implemented in the near future?

[WickyNilliams]

I'd also like to echo the earlier recommendation to check out (read: steal ideas from) Origami for sublime. It's super powerful and has well-designed/intuitive key bindings (after you learn the basic "chord" structure), which include shortcuts for arbitrarily splitting window horizontally/vertically, moving files between panes, moving focus between panes, resizing panes, quickly expanding one pane to some percentage of of editor size.

It was by far the most valuable ST plugin for me, and the one thing i still miss on a daily basis in vscode

[jimeh]

The lack of grid-layout support is main thing preventing me from giving VSCode a serious try.

[dreadnautxbuddha]

Waiting for updates regarding this feature. Switching from Atom to VS Code is painful without this.

[declan-zhao]

I need this feature.

[atmd83]

Any update on this at all? happy to look at putting in a PR if its not something that's being actively worked on??

[JeremyKruman]

This is such an important feature, and its absence is pretty much the only thing keeping me on the fence about switching.

[openclosure]

VS code needs this!

[Chillee]

While we're on this topic, I'd like to request an API to programmatically control the splits. It'd be kinda lame if everytime we wanted to resize panels we had to use our mouse.

In addition, I think it'd allow for some pretty cool plugins.

[Leedehai]

Definitely need this feature!! please :)

[JeremyKruman]

@atmd83 Unless there's something being worked on behind the scenes, this doesn't appear to be something that anyone is actively developing. I have yet to see any pull requests related to this issue, and it hasn't been added to any upcoming milestones. If you still wanted to put in a PR, I don't think it would be a waste, and it's probably our best shot at seeing this any time soon.

[pelotom]

@atmd83 based on the comments and reactions in this thread it's safe to say that you'll be hailed as a hero by thousands of developers if you implement this feature

[Chillee]

@pelotom @atmd83 @JeremyKruman I'd be wary of trying to work on this. This is something that impacts a lot of wide ranging things, and it'd be unlikely that your PR will get merged.

If you do want to contribute, I'd suggest talking to one of the VSCode core team along the way.

[JeremyKruman]

@Chillee you might be right. I'm honestly not familiar enough with how everything works behind the scenes to make that call. Until we get an update on this, I've found an extension here that allows for custom CSS and JS to be inserted into VSCode, which could maybe offer a temporary workaround for people who are particularly desperate for this feature. I haven't had too much time to play with it yet, but I plan to spend some time this evening trying to get one vertical editor on the left side of the screen, and two horizontal ones on the right. As others have suggested, it might be much more easier said than done, but I wanted to bring this potential option to people's attention in case anyone else would like to investigate 😃

[greg-petersen]

For those that want to use VSCode. I do have a small work around, nothing special though.

Open two separate VSCode windows. In one of the windows open the main folder of the project you are working on. In the other window, open a subfolder of the main project folder, i.e /src. You can then place those two windows side by side and then set the layout of each of them independently. Allowing you to have a 2+1 layout, or a 2+2 layout etc. Horizontal or vertical.

Be warned, if you make changes in the window that has the main folder open, and you also make changes in the other window on the same file, the changes can be overwritten. Small cost to using such a great IDE. Hopefully proper grid splitting features will be added in the future.

Hopes this helps some!

Cheers, Greg

[JeremyKruman]

If anyone is interested, you can find my custom CSS that achieves a layout similar to Greg's in this gist. It's a little finnicky (missing scrollbars, etc.), but it gets the job done for the time being.

[greg-petersen]

@JeremyKruman Can you at least scroll using the mouse wheel?

[JeremyKruman]

Yes, scrolling works via the mouse and keyboard, the scrollbars are just not visible. They're somewhere, they just need to be styled properly to get them into the right place, which I have yet to get around to.

[greg-petersen]

@JeremyKruman Dude, you're a boss!

[amghost]

Any updates whether this features will be implemented or not?

[kieferrm]

This is still on our backlog.

[praveenpuglia]

I was thinking of making an extension which works with an angular-cli project. When you open a *.component.ts file it automatically detects the template and the css file associated with the component and puts them up in a horizontally split screen.

It's annoying to be moving around files and in an angular-cli project we tend to do that a lot from component to template and vice versa.

Unfortunately horizontal splitting isn't supported and doing too many vertical splits is just not usable.

------------------------------
TEMPLATE     | COMPONENT.TS
             | 
------------- 
STYLES       |
             |
------------------------------

[peabnuts123]

FYI @praveenpuglia in the Ember-CLI world there exists an extension to quickly switch between related component files via a shortcut which is pretty much essential for sanity in that space. Could be an alternative solution to the one you've posted, and might already exist, if you are looking for some sanity before this feature lands in vscode

[robertoestlin]

When grid layout comes I switch from sublime. I couldnt believe my eyes.... otherwise very good!