Vscode: Support a grid layout for editors

Created on 3 Nov 2016  ·  191Comments  ·  Source: microsoft/vscode

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

drag-drop-layout

feature-request on-testplan workbench-editor-grid

Most helpful comment

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

Grid layout

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

All 191 comments

@Tekbr what is wrong with our approach?

editors

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

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.

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

Grid layout

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

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.

+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):

image

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.

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

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

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

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 :)

Please see discussion in #9443.

@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?

@andradei yes.

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

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

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.

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

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

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

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.

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!

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.

👍

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.

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.

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

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

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

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

I need this feature.

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

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

VS code needs this!

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.

Definitely need this feature!! please :)

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

@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

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

@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 😃

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.

image

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

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.

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

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.

@JeremyKruman Dude, you're a boss!

Any updates whether this features will be implemented or not?

This is still on our backlog.

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

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

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

@peabnuts123 thats a great idea. I'll try to find something and follow this thread too.

@praveenpuglia Find Related should support the shortcut key scenario. Unfortunately, it won't work out of the box, as I don't have any built-in rulesets for Angular (but I would love to add them). If you need help setting up the rulesets -- let me know.

Open multiple editor ?

image

Yep, that's an option, @bonarja, and although I understand why you think that might be a helpful solution, I'm afraid it misses the mark. The reason people are requesting this feature isn't that they don't realize they can open up multiple instances; it's that by using multiple instances, you can't use editor features that are shared among multiple buffers (e.g. named clipboards) or allow you to move between buffers that you in your screenshot have displayed in separate editors (e.g. using vim-mode split commands).

On top of what @coddingtonbear said, vscode does not support opening the same folder in multiple instances. So for me, your suggestion is not a realistic solution

@bonarja @coddingtonbear @alexriedl This won't really work for me either, cause I tend to split, switch, close buffers and change their placement all the time as I'm working. And using multiple windows would just be way too slow and cumbersome for fast and continuous switching.

Another person who need grid view in VSCode 😭

here is also another person who need grid view in VSCode... :)

I need grid layout in VSCode too.

...and I also really want this

+1

People in this thread +1ing and "I want this too"-ing, please make sure you 👍 the original post so that this Issue gets visibility (issues can be sorted by number of 👍 s).

This feature (grid layout) is the only thing holding me back from fully switching away from Atom. I love VSCode, it's fast and I can write plugins using Typescript. Amazing. But this feature is sorely missed and holding me back from fully embracing VSCode.

I am amazed that macOS Touch Bar support made it in before this feature.

Thank you again for all the hard work, it's an amazing app (except for this). Please consider moving this feature up in priority.

(I already +1 the original post as well to show my support ;)

Still noone assigned :/ Please prioritize this! It's the only feature slowing down mass adoption of vscode ;)

+1'd and commenting -- really would love to have grid layout for editor windows. Particularly a pyramid layout of one full-width editor top half of screen and two half-width editors on bottom half 👍

_VS Code_ hackers, any update on this? Please.

+1

I really don't understand what's the problem with this feature? The editor supports the needed functionality already, just not both options at the same time. For people like me with a big monitor (43" 4k display) this would be a godsend!

@underscoreHao one presumes the problem is that it's difficult to implement, however easy it may appear from the outside. Sad that it's not being prioritized though; this has to be the vscode's most-requested feature by a long shot.

Come on guys. Have none of you worked on a product before? Things don't just appear because a user really wants it to. Clearly they are doing stuff that are apparently higher prioritized - like multiple folders (or for other reasons that aren't exposed to the customers/users). You can sort by 👍 priority on github and you'll see that this is in fact not the most-requested feature - it's in place 11. Chill :)

VIM and Emacs are both editors that are nearly 20 years old and they support this as do most professional IDE's and even the other electron based editor Atom. Yet VSCode still doesn't support this and is supposedly the best editor. This keeps me from using VSCode as anything but a simple notepad. Does Visual Studio the IDE support this?

edit: This should be marked a bug as it's such a basic feature it's assumed any modern editor supports it. Confirmed from above comments that even Visual Studio IDE supports this. Is this a deliberate choice to hold back the user experience with VSCode to encourage people to move to Visual Studio IDE for the "full experience"? If that's the case I'll stick with VIM, Atom and IntelliJ.

The lack of grid layout is frustrating to me also. I've used Visual Studio, Atom, Spacemacs, and Vim recently. VS Code is currently my favorite, but the lack of horizontal splits is a serious shortcoming.

Added a 👍 - I'm in the process of moving my workflow to VS Code, and so far this is the only real pain point I've encountered. (Which is to say, this editor is kind of amazing - so, thank you!)

To echo a few comments above, out of the various editors (and plugins) I've used, my favorite approach to this is by far Origami for Sublime Text.

+1

Deal breaker for me. Giving up on VS Code for now.

I'd really love to have this feature. Right now I'm using multiple windows and it's not as good. We should ideally be using only one instance to manage code.

+1

Related to this discussion, but I haven't seen it explicitly mentioned yet: The limit of 3 editor windows is insufficient for large (4k) monitors. If we're making the editor view layout more flexible, then this should also include removing limits on how many editor windows / rows / columns can be created.

+1. Switched back to Atom until this is done. IntelliJ pack, Sublime, Atom, Visual Studio, etc., support this.
Its kinda the first thing i looked for, specially on my 2560 x 1080 screen. Custom grids it's a most for me.

I can't believe this issue is still not resolved. It's really a must for a code editor! :/

+1 for me. I come back to vscode because of the next gen concepts and the pure awesomeness of this editor, but after a few hours I come back to sublime+origami, since I work on a 4k monitor and I usually have 4-6 panels open in various layout settings. Unfortunately the 3-tab limit is a deal breaker for me at this moment.

make sure to 👍 the original PR comment if you want this landed. vscode team uses reaction sort to prioritize features.

once this feature drops, i'll never look back. in the meantime, thank you for a fantastic editor!

I love VSCode except for the lack of a grid! Grid please :)

very need to split editors window!!!!
grid layout is best!

hey ok we all agreed that we want this splitting thing. so what next?

Wait for someone on the Microsoft team to tell us why this isn't worked on? And/Or someone with the necessary skills could put together a PR. I can't believe that feature would be particularly hard to implement if you are familiar with the Code base, but I've never written a Line of JS/TS or looked at the codebase, so I might be completely wrong

Speed up development of this please! I've waited over a year for it and can't believe something so basic is not built in and worst still hasn't started. It is very essential for modern application development. Thank you for the nice editor but many of us cannot use it as the main stream editor without the horizontal+vertical split (or grid) function.

Just chiming in to support this feature. I think developers who are used to environments like Sublime Text that give you almost infinite latitude on how to split up your screen will find migrating to VSCode very unappealing. (Speaking for myself: most of my team uses VSCode, but I personally find it unusable to the lack of horizontal+vertical splitting, so I'm continuing to use Sublime for now.)

More support here! I'm really excited for this feature to happen. I bet half of the people watching this case, including myself, would jump at the chance to implement this and certainly have the skills and qualifications to do so. I don't understand what's taking so long to prioritize this now that VSCode is so optimized, streamlined, and well adopted, but with only 7 PRs unassigned right now, I can't say that it looks like you're slacking :)

In the meantime, I'll keep putting miles on Sublime, and I'll look forward to trying VSCode again when it lets me efficiently use my whole monitor for code without opening a murder of electron runtimes

Please make this a reality

@kieferrm: Could you at least say something about why this hasn't made the cut yet? not enough upvotes? Too difficult to implement? Just forgotten?

not enough upvotes?

Don't think so, it's top5 issue, only "floating windows" has more upvotes and is also unassigned (#10121, they relate in usage of the drag&drop).
I guess its not just a little bit of work and this issue was solved halfway at some point (we have horizontal and vertical splits, but not both at the same time ;)
We need the combination for high resolution monitors though - please make it happen! :)

Would be happy to see this soon.

What a bizarre conspiratorial reaction. Given all the things that VS Code does implement, I rather doubt that grid layout is the one thing Microsoft refuses to add because of cannibalizing from VS Studio.

Let's see your pull request get summarily rejected with no explanation before we start slinging conspiracies.

Let's see your pull request get summarily rejected with no explanation before we start slinging conspiracies.

And yet, his comment was summarily deleted... not exactly the best way to dispel conspiracy theories.

@MikeGitb @Justus-Maier according to this comment it seems that 'not enough upvotes' might be the case.

TO THOSE READING THIS ISSUE FOR THE FIRST TIME:

The developers are aware of the importance of this issue, but they use this filter to decide which features are top priority. Make sure to upvote the original issue with a 👍 if you want this feature to be developed.

The developers are aware of the importance of this issue, but they use this filter to decide which features are top priority. Make sure to upvote the original issue with a 👍 if you want this feature to be developed.

That’s an oft-repeated refrain, but notice that none of the 4 issues with more upvotes is on that agenda either.

@aberonni @egamma @bpasero The lack of response by the developers is creating a communication issue here and reporters/commenters are feeling frustrated due to a lack of engagement. If the developers could only follow up with a detailed in-depth response it would ease a lot of anxieties.

@alxgrtnstrngl Anxiety is indeed pretty high for this feature, but we shouldn't be too demanding of the devs without knowing what they are actually working on before taking the next big challenge (which this one seems to be).

I anticipate this feature as well. But to me VSCode is still vastly superior than Atom even without it.

👍

+1

Leaving VSCode today, because of the lack of progress in over a year. I'm sincerely disappointed.

I love minimized code, for reuse it, the grid view helps me alot for developing in any lenguage, getting a useful, simple, monitor space use...

Sorry for my english... :P ... hope this feature would be very soon...

This issue was brought up in the Iteration Plan for January 2018 by @egamma.

"We understand that this feature has many up votes, but there are others with more votes. All I can say for now is that the feature is on our radar."

Can anyone explain me how many votes a must an issue have to force developers to take it into account?
This is a really useful feature and all of us miss it a lot, I mean A LOT!

I honestly doubt that this is just a matter of how many votes exactly a feature has. They also have to take into account the expected necessesary effort as well as any synergy effects / dependencies. And the votes are anyway just a very rough indicator of how important a feature is for the community (e.g. I can't prioritize one feature I'd like to see over another)

That being said, I am surprised that this is apparently such a problematic feature to implement.

@MikeGitb Exactly. I think they will have to focus on this one when it comes the time and leave other important features on the side because everything indicates this one feature will mean a big change in the current architecture of VSCode. Even if this one feature is worked on right now, I doubt it would be shipped in the next release cycle or the next unless this is a all hands on deck approach.

I think multi-windows might help people with wider screens or 4K a little until this is implemented.

PLEASE WORK ON THIS!!! This is the only thing stopping us (10 people here at work) from using VSCODE as we are all using huge monitors! Por favor!!

I had made a post about this before knowing this was currently active. Is there any update from the VSCode team on whether or not they think this is value use of their time to make the editor better for their users? This is a feature that would be beneficial to a lot of people who don't code on big screens or are coding on laptops and want to see their files full width but need to have two or 3 files open at a time.

I know for me when coding on my 13 inch MacBook pro or 15 inch Lenovo Laptop I want to move around but tend to stay at my desk so I can be plugged into another monitor. This is a feature that the almost all other competitors have and seems to be a feature a lot of people in here miss when switching from Sublime, Atom, Vim, etc.

Atom Editor introduced the concepts of Docks which is what most people (including myself) would like in VScode & are referring to in this thread:

Also created a tweet with the gifs here ➡️ retweet to voice your concerns 😄

screen shot 2018-02-11 at 7 53 40 pm

I use this feature everyday in Atom. Here's a contrived demo gif of me with 2 code files open, my linter & errors panel open and 2 terminals open. All of the aforementioned are draggable and placeable pretty much anywhere in the editor 🔥 ✌️

ezgif com-video-to-gif

Even the git diff viewer is draggable anywhere in the UI too

ezgif com-video-to-gif 1

Yeah I hope what @cliffordfajardo posted is what's getting implemented, it's very powerful and intuitive. Of course, if its possible to drag tabs out into their own windows, that would be amazing. Multimonitor editing and debugging is where it's at.

What I'm wondering is, why haven't the VS Code devs simply ticked the ✅ Support Grid Layout checkbox yet and given it to us?? No seriously, this isn't a trivial change so no wonder it's not here yet. :)

This would be essential for the Vim keybindings of <C-w>w and <C-w>s to work correctly

Sorry to necrobump, but I would very much like to at least have 4 side by side as I have a 3840 pixel wide display and 3 as a limit only really corresponds to 1920 wide pixel displays.

This would be awesome--the ability to view four windows at once: two windows across the top, and two windows across the bottom. Easily done in Atom and Sublime Text. The lack of this feature is why I don't use VS Code.

Thanks for Looking at this @aberonni

I touched on this a bit in the 'terminal tabs bug', but is anyone interested in having the editors use tabs full of panes (the way the terminals do) instead of panes full of tabs (the way this thread/atom/sublime) is about?

tabs full of panes would allow you have a group of files open, arranged in some layout. Then when you change tabs, another group of files, in a similar or different layout.

I would like it to be exactly like the multi-panel terminal with multiple layouts like the linux terminal client 'Tilix'. The drag-to-side feature, but add top, bottom, left and right to each panel. And the same with the terminal. On the top left of the window work-pane editor, a button that lets you add a new view, as well as switch between them. https://youtu.be/XzHE_BcSRbA?t=312

Tho, instead of hiding the multiple views, turn them into tabs (preferably with the ability to label them), and each pane has its own header. Or make it a collapsible sidebar that when you expand it, it shows a preview of each view layout. Or maybe it's fine just like Tilix does it, where you click a button and it shows the previews and you can switch. Maybe add an up-down navigator to flip between them.

The terminal, I can't really see why you would really want more than 3 side by side but it would be nice if it had tabs instead of a button that lets you select the menu of multiple views. The terminal would be best if it was independent and acted as a separate UI component to the editor views.

The terminal, I can't really see why you would really want more than 3 side by side

full screen mode on an ultra-wide monitor.

but it would be nice if it had tabs instead of a button that lets you select the menu of multiple views.

Yup, thats the other thread.

The terminal would be best if it was independent and acted as a separate UI component to the editor views.

I go back and forth on this (yay for things that are configurable). I Think it would be cool if any split window in the main editor area could be come a terminal (sometimes you just want a big terminal), and also the persistent one is always there because it's doing things useful to the project as a whole, and i always want to see it.

yeah, maybe have the option of the quake console style, top, sides and bottom, or have them as a type of panel in the view. Also I know it's configurable but maybe a the shortcut should be a single key. I might have to think about that, I would like to use f12 if it was available.

I think you can't get much better than the way Origami works for Sublime Text: https://github.com/SublimeText/Origami . With a right click you can add/remove panes in any direction, save your layout, etc. Extremely useful.

One other note: In Sublime you can also open an entirely separate window of the same file. I use this, for example, to have certain panes open in one monitor, and other panes open in a separate monitor. (that might be a totally separate feature however)

Would prefer if everything in Code was just a tab (terminal, problems, output debug console etc), and that tabs were free to be positioned / split anywhere (above, below, side by side etc) like atom.

dwginfnvqaabjjr

Would prefer if everything in Code was just a tab (terminal, problems, output debug console etc)

Exactly! This is one of the main features of editors as VIM or Emacs that makes them so powerful - __a generic approach to windows__.

I once requested something very related, but with focus on a specific use case: #30987. It appears VSCode team totally didn't understand usability value of that (cc @bpasero )

Exactly! This is one of the main features of editors as VIM or Emacs that makes them so powerful - a generic approach to windows.

The emacs terminal emulator is fantastic. You can navigate quickly with keystrokes and add or delete text anywhere in the buffer. (in evil mode of course)

I spent a month in spacemacs a few months ago and loved the buffer multiplexing and terminal emulation. Emacs is just missing some tools I use everyday in vscode.
When I switched back to vscode it was back to 3 open files and tmux for terminal multiplexing.

It makes me cry a little every time I want emacs functionality (which is sad. I always make fun of my co-worker who lives in emacs, yet I envy him sometimes). I would think Microsoft could implement this, but after months of following this thread I'm beginning to lose hope.

Great news. grid layout made it to the Feb 2018 iteration plan

https://github.com/Microsoft/vscode/issues/43361

Workbench

🏃 Improve notification UI #22388 @bpasero
💪 Investigate support a grid layout for editors #14909 @stevencl @bpasero @Tyriar @joaomoreno

image

Emacs is just missing some tools I use everyday in vscode.

Exactly, the great integration of latest language features are the main reason I'm on VSCode. Nobody works on providing that to Emacs unfortunately.

Still my productivity on VSCode suffers purely cause of such limited windows handling

WOOO I can plan to move from sublime text to VSCode now!!!
Thanks ~Chuck Norris~ Microsoft!

"Investigate" means that they will still analyse the issue and only then set a goal to really implement it? Right?

Looks like this item is deferred on the Feb iteration plan as of 02/26. Hopefully next cycle.

Suddenly hit this no-grid-layout-yet-folks problem while working on a very tall .tex file just now. I was hoping I could split the tall .tex file pane into 2 verticals on the LEFT group and the single PDF file on the RIGHT group. That would be sweet for us using VS Code for writing papers, VS Code team. So pleeeease approve the feature request for grid layout c(~_~)"

I love VS code but the lack of this feature really makes me miss Sublime. Hopefully this will get more love and be out soon!

This should be implemented without limiting the maximum number of columns/rows, the current limit of 3 columns doesn't make sense to me.

Sorry guys but this is just an INVESTIGATION!!
"Investigate support a grid layout for editors #14909 @stevencl @bpasero @Tyriar @joaomoreno"

@pallapo "investigation" is still an indication of movement forward. It's great to see any official movement on this ticket at all. Thanks, team!

@joshjensen you're right!

I agree with @fabiospampinato. The option to split any viewport into two, in either orientation, as long as the ui allows it, seems like a strong way to implement this. If the windows are generic enough, they could be used to build any number of tools (similar to the Docks feature from Atom referenced above).

Time to do something about this Microsoft VS team 👍 😄

Trying to leave atom completely behind, but this is a big one is holding me back. I love everything else about VS Code. Hope Microsoft allows vertical and horizontal splitting soon!

Adding +1 to the "this is the only thing keeping me from using VSCode full time" sentiment.

@elleryfamilia if you don't care able being able to do both at the same time these are the steps to activate just vertical or just horizontal

  • View > Toggle Editor Group Layout menu.
  • View: Toggle Editor Group Vertical/ Layout command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P))
  • Toggle button in the OPEN EDITORS tool bar.
  • ⌥⌘0 (Windows, Linux Shift+Alt+0) keyboard shortcut.

But yeah having the ability to drag a file anywhere top bottom left and right would make vscode practically unbeatable for me.

Ran into this myself trying to switch to VS Code from Vim. Major setback. I particularly noticed when I wasn't able to find how to jump left or right between splits with a keybinding since each is explicitly numbered. In my Vim+iTerm setup I'm able to jump up and down seamlessly between a vim split and a terminal split and replicating that in VS Code is near impossible.

The mention of EVERYTHING being a tab, not just editors, would make a massive difference to a grid layout system as well. Having a terminal tab, editor tabs, debug tabs, etc. would be huge... even a sidebar tab might be nice but would be a huge overhaul of course. I hope this gets some solid traction. I may not stick with VS Code long unless I figure out a couple of hacks for navigating relatively between editors.

Yeah this is a major thing. Screens aren't always as you think they are. I use multiple portrait monitors and with the ultra-wide monitors there are reasons people would want to do more than 3 columns anyways.

No reason for VSCode to implement restrictions based on their own personal thoughts of how screens are used.

I was in love with Atom until this one thing came up. I usually have atom projects on both portrait monitors with horizontal splits on them and then i use multiple 3-4 vertical splits for my ultra-wide.

Actually spent a good 5 minutes trying to do it thinking there was no way I couldn't haha - like "grrr why wont it go down there darnit!" :-P

+100 to implement this!

Seems the Investigate support a grid layout for editors task has been moved to Deferred Items.
I come to this issue page almost every day, to check the status.
Actually every-time I open the editor and split the window, I go and check this, if there is any hope.

I hate switching editors, VS Code is perfect in all the aspects, thanks a lot for all the awesomeness!!
But starting to seriously considering to switch, working on multiple files with current layout is a pain, every single day.
Much more pain than having to reload after installing an extension and other issues, that had more votes than this.
Not being critical at all, this is by far the best open source product I've used.

I would only appreciate more information to the community, is this even feasible, how much longer should we wait till we know more? Is this not critical to the vast majority of users and has low priority?
Please let us know, so we can decide and move on.

I don't see it deferred- #47369

Deferred in March, fingers crossed for next iterations.

Yeah, I am waiting for this as well. Even Visual Studio can do it with some hassle (drag file to start separate window, which you can split again = you can have multiple windows with multiple splits).

I absolutely need it when I need to see multiple files. Many people have requested it and many more will. Please, please, pretty please, implement it. It is incredibly useful on big screens.

Seems to be "In Progress" for April #47369

@RayBenefield navigating between splits as you describe is doable by binding keys to workbench.action.navigateUp|Down|Left|Right.

@bpasero look 1.23 insiders release and no window layout(#14909). Does it mean that it will not be updated in April?

Variables, watch and call stack panels are too small!
If I have to inspect variables value I can't see anything, I have always to resize the panel on the left.
Please let us set debug panel orientation to an horizontal state!!!

:+1: In the great words of 50 cents, Patiently Waiting.

But I don't know if it's so difficult to implement.... I think there's a trouble with visual studio professional, there is no grid editor layout support there....

49599 Slay Ben, slay. The final, missing piece that will make VSCode the only editor of choice in 2018. Except for ssh. VSViCode 2k19?

Wow. Just looked over all of the comments of this issue. I have almost gotten used to the no grid layout and not realising that this is such a hot topic. For anyone skipping through till the end, the latest update doesn't include it but according to issue #47369 they are in progress of creating something similar to this.

Let's cross our fingers for the May update to include this :crossed_fingers:

@elebumm There's actually a pull request where you can see how far they are with this feature and the continuous progress they are making.

It also states that they plan to roll it out in June for insiders.

Current Plan is to make this feature testable for this months (May) endgame week and then ship it to insiders early June. This would mean it lands in stable for the release end of June.

They've even posted an animation showing it off.

animation

@skreborn Hope this is true. Having only 3 vertical splits is super unpractical with 2 monitors...

@psychosis448 It's true, here's the gif from the WIP PR:

Image from PR

🤞 seeing the gif really brings joy.
Just finished reading all the comments and realized that these guys have definitely been hard at work.
I know this wasn't an easy task and wanted to just say thanks for pushing this along and yet again taking the beating and hearing us out.

Greatly Appreciated !

I know that I'm late to the party and I guess this would be out of scope for the grid layout thing, but in case the VS Code team is watching: it would be really, really awesome if the terminal windows, especially, could somehow fit into this grid layout. As you probably know a lot of users on *NIX use screen or tmux together with vim or some other console editor. Others use tiling window managers, for basically the same effect, just with graphical editors.

It would be a shame if you make such a huge change and don't at least design the new feature with such an logical extension of this idea, in mind.

Implementation of this feature takes a very long time..... and it still doesn't ready...
I hope it will have functionality to toggle focus window into full screen (and back to previous layout when toogle it once again), something like this:

Split H AND V is a MUST nowadays.

Advanced Coders dont use those pancy fansy Apple mac's with touchy thingies.

I do use 2 x 4K monitors.

And 8k Monitors are on track for this year.

Example of 1 x Monitor 40" resolution 4k 60hz, https://prnt.sc/jm3rap. The visual of the project is spectacular.

Atom is very slow, please fix this ASAP.

Thanks.

Ohh boy, 60hz? God-like coders use 120hz. I can't use this product.
Those extra refreshes are necessary for superior cursor movement speed.

@phoenixsampras I hope there's nothing sensitive in that screenshot..

@phoenixsampras @michaelduminy IP's and at least a DB password... I'll recommed taking it down 🤦‍♂️

Edit: Now I realize it was irony @michaelduminy 😅 ...

While this feature will land into our insider builds only sometime next week (for a stable release end of June), we have custom insider builds for testing this feature now available for more people to try out:

Note: In order to run these builds you will first have to close any running VSCode Insiders build.

Feedback is very welcome, ideally as individual issues and not as comments here to reduce the number of notifications for people subscribed. Please ensure to first have looked for any existing issue with the workbench-grid label already: query

There is no real documentation for the new features yet, except for maybe the test plan item we went through this endgame week: https://github.com/Microsoft/vscode/issues/50458

A quick overview:

  • editors can be split vertically and horizontally (e.g. via drag&drop, or from the split action in the editor toolbar - hold Alt key to split in the other direction)
  • a setting workbench.editor.closeEmptyGroups allows to configure if closing the last editor of a group should also close it
  • the "open editors" view is no longer showing groups based on their location (left/center/right) but with a number in their order of creation

We are still planning on tweaking this experience, specifically around these outstanding issues:

  • Connect the sash in the 2x2 grid #50770
  • Allow to drag sashes at places where 2 overlap to size both ways #50769
  • Grid: Implement "Centered Editor Layout" #50936

Something related, especially for those who come from Vim, is the fact that open files are bound to editors.

Is there a way of closing a editor without closing its files? So we can have vim-buffer like functionality?

Will this implementation also apply to the activity bar? Could I have the bar attached to the bottom?

Well those are internal IP ranges, not public IPs. You can learn more about
it on https://en.wikipedia.org/wiki/Private_network

On 28 May 2018 at 13:47, Lucas Andión Montáns notifications@github.com
wrote:

@phoenixsampras https://github.com/phoenixsampras @michaelduminy
https://github.com/michaelduminy IP's and at least a DB password...
I'll recommed taking it down 🤦‍♂️


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/14909#issuecomment-392577362,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB37QPG3mjlaU8bbCEuA7e1h190rdZj2ks5t3DgYgaJpZM4KoZDu
.

--
Best regards,
CP

@bpasero How do we actually install these, though?

@dnutels you should be able to just run the provided downloads without installation by unzipping and double click the application binary. I did not want to put installers up because since this has not yet landed in insiders, you would get an update notification shortly after that would bring you back to the previous version.

@bpasero Just tried the builds you posted and it worked flawlessly, thank you!

Awesome feature without any limitations! Great work @bpasero

Thank you! This is awesome! I've been watching this issue for years. Congratulations on this!! Thanks for everyone's really hard work and perseverance to work through the terrible comments of 'I won't ever use VSCode with out this!'.

@bpasero Works great but I think the areas to initiate a split are a bit small. Are you planning to support panels like "output" and terminals in the new layout?

Working great, love it! Thanks @bpasero!!! Where should I send the 🍾 ? :)

Only thing I noticed.
If I initially have full page with a symmetric 2 x 2 grid.
I resize the editor to only half a screen and make it full screen again, it does not maintain the ratio of open sections.
The first column is very narrow.
I notice this with manual resize and using Magnet as well.
Not important but a nice to have. 😄

VSCode team you are amazing! Thank you, thank you, thank you. 🍾🍾🍾

Does this feature make 3-way diff in vscode possible?

Could this be extended to any window by any chance? Like getting rid of the sidebar at all and allow me to construct my own tiled UI from all the windows I need including terminals, code overview, explorer, problems list, etc.
In this case, the sidebar could act as sort of a palette for available windows and autohide.

graet job @bpasero I really love it!
Thanks, thanks a lot!!!!

People interested in grid support for other UI elements than editors should thumbs up:

  • Both left and right sidebar / multi sidebar #26777
  • Allow to dock editors, views and panels anywhere in the workbench #11472
  • Allow to show multiple panels at the same time (split pane) #11889

@bpasero during a discussion about grid layouts, maybe also this topic:
https://github.com/Microsoft/vscode/issues/16927

As I wrote there, similar functionality to this:
Atom -> https://github.com/santip/maximize-panes
SublimeText -> https://github.com/jisaacks/MaxPane

This is brilliant! Hope it makes it's way into the Stable build very soon! 👍

Please consider keyboard shortcuts for grid window actions for those of us who dislike leaving home.

It would be nice if Terminals could be part of the Grid system, so we can arrange our terminals in any grid too! https://twitter.com/_rctl/status/1004704690586705921

@eighteyes I am counting ~35 new commands being added as part of grid that all can have keybindings assigned so please let me know which one is missing and we can look into adding it...

This is awesome! It's simply fantastic that the VSC team has been able to work on this and make it a reality. Can't wait for the stable release. As time goes on, I'm sure the team will bake in the ability to split in terminals, git windows, etc. For now, I cannot complain that this is coming and am simply ecstatic. Thanks for this! 🥇

Dear VS Code team: you put in the VS Code release notes that we should subscribe to this issue on Github if we want to be notified when the feature is ready: "This feature will be available in our Insiders release in the beginning of June. Subscribe to issue 14909 to receive a notification when this happens." Cool idea in theory! Minimal work on your end, leverages existing tools, users already know how to use Github, etc. But in practice, I'm getting a lot of noise from this issue, and I imagine other people are too. I subscribed within the last 24 hours and already received a dozen or so notifications through Github unrelated to the release that made me want to subscribe in the first place. I hope this constructive criticism is helpful! But I am definitely going to unsubscribe from this issue, and I do hope that another way of subscribing to new features can be worked out. Sincerely yours: some random guy.

Awesome @pelotom thanks for the link!!

Closing this as the feature has landed in insiders (download). You can see this query for work that is still planned for this milestone (as for example to support "Centered Editor Layout" properly).

Feel free to continue to report issues or feedback (after checking for duplicates).

I will mark this issue as readonly to reduce the number of notifications people get.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

philipgiuliani picture philipgiuliani  ·  3Comments

chrisdias picture chrisdias  ·  3Comments

shanalikhan picture shanalikhan  ·  3Comments

omidgolparvar picture omidgolparvar  ·  3Comments

curtw picture curtw  ·  3Comments