Vscode: Make panel position configurable

Created on 9 Feb 2016  ·  124Comments  ·  Source: microsoft/vscode

I just upgraded to VS Code 0.10.8 and I see that the debug console is now at the bottom of the window. I can see how some people might prefer this, but I actually preferred having it on the right side. The position (right/bottom) should be configurable in settings.

feature-request integrated-terminal on-testplan ux

Most helpful comment

@bgashler1 It's been a while, any update on this?

VSCode has become the default IDE for go development and it's a pretty big deal breaker, as the output is often very compact.

Here is an example of wasted space when running tests for our open sourced zap package, for instance:
screen shot 2016-11-30 at 12 21 29 pm

That's a solid half the screen of useless black :( It would be so great to put that panel on the far right and be able to fully utilize the dual editors while working on tests.

All 124 comments

+1

I would prefer a button right at the window in addition to a default setting. Also, previously you could have the debug console take 100% of the space by closing other windows. Now, this is not possible anymore. It would be better if all windows shared the same behaviour, so every window (file, debug console or task output) could be docked vertically, horizontally or maximized to 100%.

@felixfbecker thanks for your feedback!

We made the console horizontal so that long output could be seen without being clipped at the end. Since you prefer the vertical console, I'm interested in how you made the vertical console work when the output was wider than could be displayed. Could you share what you did in situations like that?

When we made the debug console horizontal we wanted to make sure it would not be confused with same functionality of a text editor that has focus—thus avoiding making users think that clicking on a file in the Explorer viewlet will focused on the console can replace the console with the open file. This was a problem previously—the vertical debug console was often replaced with a file when opened because it had focus.

We are exploring making it possible to split text editors horizontally and vertically, as well as allowing the console to be either horizontally or vertically. We also want to keep a distinction between the console and editors to avoid people thinking that it can be replaced with a text editor.

Does this sound like it will resolve your concerns?

@bgashler1

TL;DR highlight the currently focused window better, make all windows behave the same

I'm a bit on the fence wether I prefer vertical or horizontal. But many use 16:9 monitors, and I certainly notice that editing files with the horizontal console open is not fun because there is not enough space for the editor. I catch myself closing the console as soon as I scroll through some file while debugging so my eyes can scan it more easily.

We made the console horizontal so that long output could be seen without being clipped at the end. Since you prefer the vertical console, I'm interested in how you made the vertical console work when the output was wider than could be displayed. Could you share what you did in situations like that?

When the console output did not fit, I just resized the window or even closed the open file so I had a full-width debug console. I then went back to the file with Ctrl+Tab. One thing I would like to see is a button in the console to toggle wrapping of long lines, because sometimes it is beneficial (for ultra-long string outputs) and sometimes it is annoying and breaks formatting (for stack traces). Being able to disable wrapping in certain cases would also reduce the need for a horizontal console.

When we made the debug console horizontal we wanted to make sure it would not be confused with same functionality of a text editor that has focus—thus avoiding making users think that clicking on a file in the Explorer viewlet will focused on the console can replace the console with the open file. This was a problem previously—the vertical debug console was often replaced with a file when opened because it had focus.

Yes, that was sometimes confusing, but I think the reason was that there are not many visual indicators what window has focus. In the January release there was a lot of work for accessibility. For example, the debug section now has slick blue outlines that indicate when a panel is focused:

screenshot 22

Maybe you could add a similar outline around the current window so it is clear what window gets replaced when a file is opened?

We are exploring making it possible to split text editors horizontally and vertically, as well as allowing the console to be either horizontally or vertically. We also want to keep a distinction between the console and editors to avoid people thinking that it can be replaced with a text editor.

Im definitely +1 for "universal" window management, where every window can get docked vertically or horizontally - as a bonus I would even like to see undocking of windows to drag the console on a second monitor. But I have the feeling that this distinction would get messy. How will you make that distinction visible if the windows have the same features and buttons? I think all windows should behave the same.

@felixfbecker thanks so much for sharing! This is great feedback. I'm going to discuss it with the team. We really want to improve this experience.

+1 This is really a basic and needed feature that would improve UX for everyone; even a maximize button would be better than nothing.

+1 Modern computer screens' ratio of 16:9 means that there's considerably less vertical space, no point in wasting it.

This is definitely a big deal for me. I moved from a vertical 1080p screen to a horizontal 1440p screen and I am very much missing the vertical space I had when using vscode. Being able to reposition the output panel to take up some of that unused horizontal space would make working on a standard 16:9 screen a lot more comfortable.

With my current screen, I would be able to comfortably have 2 text buffers and the output panel open side-by-side-by-side. That would be great!

Yeah, I really can't use vscode on my 16:9 1080p monitor anymore. Stuff that spans full-width is not very nice on landscape widescreen monitors :(

Adding the integrated terminal label so it's easier for me to find as it's one of the main use cases for this.

An update on this, a toggle maximize panel command was added in 1.7.0 which is my workaround for this for the time being, allowing you to quickly toggle between maximized and non-maximized states. It does not have a default keybinding but can be reached via the command palette or by adding your own keybinding. Here's mine:

{ "key": "ctrl+shift+q", "command": "workbench.action.toggleMaximizedPanel" }

Something to keep in mind when we look at this is that the terminal disables several keybindings because the shell needs to use the keystrokes. ctrl+\ for example which is the default hotkey for splitting editor sends SIGQUIT to the shell process.

@bgashler1 It's been a while, any update on this?

VSCode has become the default IDE for go development and it's a pretty big deal breaker, as the output is often very compact.

Here is an example of wasted space when running tests for our open sourced zap package, for instance:
screen shot 2016-11-30 at 12 21 29 pm

That's a solid half the screen of useless black :( It would be so great to put that panel on the far right and be able to fully utilize the dual editors while working on tests.

@Tyriar re: terminal

I definitely see your point, but I'm not sure that I agree the terminal is one of the main use cases for this. I think quite a few people are used to having a good emulator (read, iTerm2, assuming macOS) open in a completely separate window.

vscode has a very great build system and that build system ties into the internal console. When the console pops up, it takes half the screen instead of just a column that I care about, leaving lots of empty space.

@glibsm we will be working on workspace management experiences, including this issue, starting in January. We've already done some related work, and we will be posting updates a little later.

@bgashler1 thank you for the update! Definitely looking forward to it :)

Great to hear this work is in scope - for those of us using larger monitors - controlling the use of screen space is key

Fantastic! I can't wait to see this for the debug console/integrated terminal.

I'm really, really impressed by Visual Studio Code, and I'm saying that as somebody who has used Emacs heavily for 20 years. 🙂

I want to confirm the use case show by @glibsm in this comment: I have a typical "short and wide" laptop screen, and I like to watch my tests while coding. My old-school Emacs workflow usually looks like this, with tests running under cargo watch or a similar tool:

emacs-running-tests

My Visual Studio Code workflow, on the other hand, is squeezed for vertical space with tons of horizontal dead space:

vscode-running-tests

I agree that trying to squeeze two windows vertically has some tradeoffs. But even very basic workspace management support—something much simpler than what's present in the regular Visual Studio IDE—would still make this easier. So I'm really looking forward to your work here!

In the longer term, it might be desirable to overlay unit test failures on the main editor UI the same way that compilation errors are overlayed now, highlighting failing tests with red squiggles and providing details in a popup. But that would require more cooperation from testing frameworks than currently exists.

Great to know this will happen as I am using Powershell ISE editor and this is missing from the VSCode at the moment.
Just a suggestion, if the terminal/output/debug/problem window can actually be detach from the main window and moved to a different monitor. This would expand the work space greatly.
Overall I love VSCode. Keep up good work.

I'm actually disappointed, these features are basic ! Each tab should be able to detach, position horizontally, position vertically, etc. For both console & files..
I'm not a big fan of the way Visual Studio is project based single windowed.

@myuseringithub constructive comments please! This is an open source project, and our community is committed to being respectful.

If the tabs are a deal breaker for you there is always Visual Studio (full edition) or many other options available to you. Please consider whether your comments are positive and helpful to those people who are contributing their time to this project.

I like to be realistic and sincere, my point was that these should be features available or on the workings, not suggestions that may end up on development. As the demand of the users increase by time, so does their expectations.
I don't see myself being disrespectful in the comment. Rather saying my opinion, getting criticism is a positive thing that would lead to a better product.
Thanking every contributer as VS code is my favorite editor in many ways, but still disagreeing on some design decisions (e.g. limiting a project to a single window).

Many reasons are mentioned above. And if considering this feature, I guess it would make sense to make it as a generic/general feature for all components of the window. Reasons including;

  • Multiscreen usage - separating windows allows better utilization of the workspace. Detaching any file tab, console, or even control panel.

  • Splitting any section horizontally or vertically - whether it is the Debug console, opened files, or the control panels.. All could be treated as sections of the window and be positioned on any side, resized to any width/height.

  • Utilizing vertical dimension in wide screens - Bottom positioned console is annoying specially when the outputs are short lines.

End up here because I can't move search results down without writing CSS patch, which is unacceptable.

Search results list with the width of 200px is unusable nonsense, it should be at the bottom, not in the sidebar. I didn't find any easy setting for it.

+1 for the ability to dock the terminal window vertically to the right hand side of the app window.

I'm using VSCode as my primary editor now, after switching from a combination of Atom, Sublime and Coda over the years (to name a few). However, the biggest issue I currently have is that VSCode's built in terminal can only be opened as a full width window. For basic stuff like running git commands and gulp watch etc, it's useful to have a terminal window open all the time, however a full width window is overkill and wastes a lot of screen space.

This is the case when I'm running VSCode on a 13" MBP, and also when that 13" is docked to two 24" monitors.

So, I often open Terminal or iTerm alongside VSCode so I can keep a full height (but narrow-ish) terminal window open to the right of VSCode. What I'd really like is to be able to dock VSCode's terminal window vertically, which would save me from having to open and manage that second app.

It's not a huge thing, but opening that second app, arranging 2x fullscreen app windows on the OSX desktop, and cd'ing to the right directories within the terminal app are all extra steps that VSCode could pretty much eliminate given the simple ability to dock the panel to the right.

It really is the one single thing that bugs me about VSCode right now! :o)

As a side note, you can use VS Code development version for getting the latest implemented features https://code.visualstudio.com/insiders

has this feature been elevated out of a backlog and into a sprint? what is the eta?

@MZelenovDELL it's on the new 6 month roadmap, it hasn't been started yet though.

This would make working with Quokka so much nicer!

Perhaps, even make the output panel the lower half of the sidebar, for simple error listings.

I think it will be useful to detach each of terminal's tab (Problems, Output, Debug, Terminal), I really like to see the output (_for ex. when I run sass compiler in watch mode_) always on right side, but terminal (or other tab still on bottom, because right side have not enough space for some long commands/outputs.

I'd like the Panels pane to be configurable as to allow it to extend to 100% of the width of the workspace. To exist below BOTH the Side Bar and Editor.

I want this ..

1

I would love to have terminal open on right side in vs code just like this (my current work space)
vsworkspace

+1

+1

+1

+1

+1

It's really surprising to see this still has not been resolved. I find it unworkable to have the terminal at the bottom, period. Would be great to have options:
at the bottom or on the right, (e.g. PowerShell ISE)
or detached! (e.g. PyCharm, which implements all)

Love code but would love it more if this gets shipped

Whats the state of play with this feature request?

I'm also coming from Emacs and really liking Code!

I understand if full panel configurability would interfere too much with the design philosophy, but a vertical split is much more sensible on most screens, so if anything I'd prefer it as the default.

Perhaps I'm in the minority, but most of my console output fits easily in a vertical split.

+1

I'm going to unsubscribe from this because of all the people who have no clue how voting works. If this does ever get released and someone is really thinking about it: mention every single nick in here, heh. Force an alert for those of us who are now going to opt out of notifications.

@shmup perhaps instead of passive-aggressive criticism you could help those who aren't github-savvy know the correct way to indicate our support for this issue? should I just be hitting the "thumbs up" icon on the original issue?

I'm happy to delete my +1 comment if that's a violation of the norms and I would venture a guess others are willing to alter their behavior with some guidance.

Yeah @mike-the-automator the thumbs-up would be a starter. And then a comment can be left if it adds any additional thought.

The +1 comment was the norm for quite a long time, in fairness.

It was only last year they implemented a technique to reduce the +1 spam: https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments

Also: https://github.com/isaacs/github/issues/9

@shmup thanks - I've deleted my comment because it wasn't very helpful and added a thumbs up.

+1
I love VSCode and the integrated terminal, and I use it for everything, even viewing text files because it is so great. Copying verbatim from @contention, "Opening a second terminal application like ConEmu, arranging 2x full-screen app windows on the desktop, and cd'ing to the right directories within the terminal app are all extra steps (read: unnecessary) that VSCode could pretty much eliminate given the simple ability to dock the panel to the right."
Please add the feature to dock the _"Terminal"_ window vertically to the right-hand side of the app window because it will really save a lot of screen space and time while testing out code.
Thank you and keep the great work!

I would like my console output on the right side of the screen, the same way I have configured it in every other editor I'm using. Why this trivial issue hasn't been taken care of yet is beyond me. It's not rocket science.

My issue is specifically testing output being very narrow vertically & in terminal/task output -- could there not be a tests column similar to the source-control column with formatted tests?

+1 for vertical view. Would also be nice to have it detachable, though at that point I don't know what the advantage would be over running an entirely separate terminal instance as I do now to avoid the wasted space concerns others have voiced.

+1 for vertical integrated terminal.

Just wanted to throw out an example of why this would be super-helpful.

If I'm writing PEP8-compliant, 79-characters-max-per-line Python, there's a ton of open real-estate to the sides of my code, less so above and below the lines I'm working on.

I'm getting a steady stream of notifications on this issue.

Can we get an update at all? Has anyone ( @isidorn ) started work on it? Can it be bumped into an upcoming release?

Thx.

I would also love to see the ability to dock the terminal on the right. One of my primary uses for VS Code is F# scripting. Right now I'm constantly opening and closing the terminal to use F# Interactive to test small snippets of code. It would be much more convenient to leave it open on the right side of the screen.

I teach kids to program using a different editor that allows me to put their code in the left column, output on the right, and a cmd-r macro to "save and run". They edit/cmd-r/edit/cmd-r... in a single screen. I'd rather switch to VS Code, but I can't until we can display two tall, narrow stacks of text (the code & resulting outputs) side-by-side and not stacked vertically.

But even the other editor isn't as flexible as wish it were. Ideally, I'd like a button bar on the output window that had toggle buttons for bottom/side, for wrap/no-wrap, for normal size & position to maximized and back (regardless of where its normal position was), and maybe a toggle for maintaining the output of previous runs (scrollback) vs. clear output at the beginning of each run.

And of course each of these "buttons" would represent commands that could be bound to keys.

And, yes, it would be nice if the various windows available in "Panel" could be viewed separately (ex: output in right column, terminal opened and closed as needed on bottom). And a pony. ;-)

(Thanks again for an AMAZING open source editor!)

I just got a new 32" 2560x1440 monitor, and would love to have the ability to dock the console to a panel on the fight. Any ETA on when this may be possible?

+1

+1

+1
Would love to have the ability to dock the console to the right.

+1
Would love to have the ability to dock the console to the right.

+1

Please do not reply to this thread with +1, or any equally useless equivalent. Feel free to add a reaction to the original post above, but adding noise just spams everyone subscribed to this thread.

I want a right-panel to display symbols tree view in the future.

I'm coding on an ultrawide; this feature is a must. Why isn't it in yet?

+1
Definitely an important feautre

+1 Also coding in ultrawide, this feature needs to be in there.

+1
Would love to have the ability to dock the console to the right.

+1

+1

Glad to see I'm not the only one and this issue still has active supporters. I want to use VSCode full time (phpStorm is too slow and bulky) but not being able to detach panels (Debug, Extensions, Explore, terminal etc...) like they were windows is what's keeping me away. I use a vertical monitor for my code and it's a pain trying to debug when I can only see parts of my code and parts of my watches etc...

I really want to just detach the panes and move them around. I've attached an image of my old configuration when I used to work in Visual Studio to illustrate what I mean.

docked

This is by far the most commented issue assigned to the On Deck milestone, which I (kind of) assume makes it a good candidate for bumping into an upcoming milestone.

Can any of the devs confirm, or can someone make a call on when/whether this is likely to happen?

Thanks

When will this feature be implemented. 😭
This is the only thing i've wanted from vscode since ages.

+1

+1!

+1

+1

+1

Please, a coder needs their right side integrated terminal! +1

+1

It takes over a year to address this?
Please add this feature.

@isidorn I would like to work on this feature. is it open for a PR?

@AkashGutha It's better to ask for forgiveness than to ask for permission.

@BrandonLegault and this thread is to discuss a software issue, not philosophy.

@AkashGutha Then don't work on it I guess? Nothing bad can come of completing a feature that this many users have been requesting for over a year. It's your call though. You do what you gotta do.

@BrandonLegault The Panel Part is a tightly coupled component of the main layout. So, any changes to accommodate this feature would require a significant amount of discussion about the approach to be taken to refactor the existing methodology.

Without having a discussion I would be shooting blind, which would be unworthy of my time.
Anyways, I'm experimenting on my fork. feel free to take a look. Currently facing build issues, so nothing much changed.

@AkashGutha please create a PR (just an empty one so we start the discussion) and ping me on it so we can discuss potential solutions to this issue. Thanks!
Unrelated to that I planed to look into this issue in the next couple of iterations.

Everyone, I finally found the solution for this!

Behold:
screen shot 2017-09-13 at 12 38 38 pm

Right, so either contribute to this open source project, or use a trivial solution. Bring on the down votes.

+1 for maximize active pane (toggle) option like maximize panes in atom

@PixelT this is supported:

screen shot 2017-09-26 at 9 24 27 am

@Tyriar this maximize me terminal panel, not active tab which have focus.

updates? need this feature

@PixelT there is also zen mode which kind of does this:

screen shot 2017-09-27 at 8 35 56 am

But yeah, we don't have a unified "panes" concept like Atom, we have editors/editor groups and the panel, both of which have different commands that act upon them.

@sascha1337 nothing yet till now. Unable to dedicate time for this. Hopefully, I'll have something next month

Link to the PR for lost people like me: https://github.com/Microsoft/vscode/pull/34267.

I have an ultrawide screen, and I just want the ability to display the terminal at the top or far side(s) since they're less valuable real estate on my screen.

There is a very frustrating habit of some extensions auto opening the bottom panel disrupting my flow while working. It'd be great to easily configure the panel to either prevent auto-opening or configure how and when such events should occur.

Edit: Since someone decided to 👎 my comment, I should be clear that I found this issue by following "possible dupe" comments on other issues more specific to the problem I'm talking about.

After 18 months that so many people requested a minor change (vertical terminal), it is still not solved!!!!????

+1 for vertical integrated terminal

+1 for terminal on the right - I use an ultrawide screen (21:9) and have plenty of unused screen on the right

@AndrewHuffman giving you a thumbs up since most people coming to this thread are here to demand a non-trivial fix and become upset when it's not available.

Instead let's all go here like @ngryman mentioned: https://github.com/Microsoft/vscode/pull/34267
and start working on a solution.

+1 for vertical integrated terminal

+1 for having the option to chose where I want this and any panel, think Adobe's panel system;) Big ask granted

+1 for vertical integrated terminal

the horizontal terminal doesnt bother me that much, but would be great to have a vertical debug console

@arturosaco @heisian I usually opt to not criticize others. I understand that you do not need this as a vertical terminal. However, its also something others want. This is an open source community. You simply down voting every single request comes off a bit negative.

This is not a fix but a feature request. It is not trivial either. If it was, the issue would not have been so long.

I'd suggest a bit more empathy on your part. Down voting of this implies that you do not want this change as it hinders your workflow. I do not believe this to be a case. Its an option that the fine folks above are requesting.

@bhargavrpatel I would LOVE to have a side-panel Terminal. I would also LOVE to have a bottom-panel search area. I am NOT telling people to fuck off, I'm telling people to stop +1'ing this thread because it results in NO contribution whatsoever to resolving this feature request.

It's common practice to strongly encourage users to contribute rather than just stick a +1 to a thread because (especially at this point when it's obvious many people want this feature) it offers nothing to the discussion.

The best way to make this +1 madness stop is implementing...

2017-10-17 0:21 GMT+02:00 Tim notifications@github.com:

@bhargavrpatel https://github.com/bhargavrpatel I would LOVE to have a
side-panel Terminal. I would also LOVE to have a bottom-panel search area.
I am NOT telling people to fuck off, I'm telling people to stop +1'ing this
thread because it results in NO contribution whatsoever to resolving this
feature request.

It's common practice to strongly encourage users to contribute rather than
just stick a +1 to a thread because (especially at this point when it's
obvious many people want this feature) it offers nothing to the discussion.


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode/issues/2806#issuecomment-337060688,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAtFWufRwSbY1l1RflrkS3BgLqD5TjYEks5ss9bwgaJpZM4HWCNy
.

+1

I think you should lock this issue and point to the PR 😂

Fixed via https://github.com/Microsoft/vscode/pull/36827
You can try it out in tomorrows vscode inisders https://code.visualstudio.com/insiders/
Or in the next stable release in about two weeks.

Someone please post a screenshot :)

screen shot 2017-10-26 at 5 03 47 pm

This is great and I was waiting for this option a long time. Great work and great add on I will be definitely switching to code now.
Just a quick question. Is there a plan to add a switch so the terminal would appear on the left not on the right and not to the bottom but to top?

@cielakm looks like it's only bottom and right

https://github.com/Microsoft/vscode/pull/36827/files#diff-402cec15e2885738e3c58be96e3a5651R227

terminal_vertical

That is how it should be?

@Domer79 +1

I have the same issue on the release and insiders.

Thanks, I will test drive it a little to see if I can ditch my current tmux and vim setup.

I'm already using it and it's amazing

Yes, well done. But it seems on Windows there is no X in the upper right corner to close it, while on a mac there is... Odd.

Was this page helpful?
0 / 5 - 0 ratings