Visual Studio Code: How to have both Debug window and Explorer window open together? - visual-studio-code

I'm new to Visual Code and I have a small question.
You have two buttons circled in red line. The first button opens the Explorer window and the second circled button opens the Debug window.
I want to have both of these windows open. Do you know how to do it?

This is not possible as of VSCode 1.13
A feature request for showing multiple panels was tracked here but the issue has been closed as as-designed. If you are passionate about the problem, please file a new issue to see if thinking on this has changed in the past year

V1.43 will have the ability to move various views, like Variables, Watch and Callstack from the sidebar to the panel (it works nicely in the Insiders' Build v.1.43). Demo:
See v1.43 release notes: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_43.md#easier-moving-of-even-more-views with a demo gif of dragging views to and from the panel.
and this setting:
We've introduced a new command to make moving views easier
with the keyboard: View: Move Focused View
(workbench.action.moveFocusedView).
And finally, this is a preview feature. So, in case you get into a
state that you can't fix, there is a command to reset all views to
their original locations: View: Reset View Locations
(workbench.action.resetViewLocations).

Related

How to restore Visual Studio Code terminal dropdown - it has become icons [duplicate]

Is it possible to get tabs instead of the select list when using multiple terminals from the "integrated terminal" window?
Terminal "tabs" appear to be coming to v1.56. See Terminal Tabs release notes. They are vertical tabs - always visible, if you want, in a resizable view to the left or right. Not like traditional tabs across the top like a browser though.
Tabs in the terminal [are] available as a preview feature and can be
enabled with the following setting:
"terminal.integrated.tabs.enabled": true
The tabs view is a split pane to the right of two split terminals. It
contains icons and labels for each terminal instance.
When enabled, the new tabs view will only show by default when there
is at least 2 terminals.
We've tried to mostly align how the new tabs behave with how the
explorer works, here are some of the other behaviors:
Double clicking the empty space will create a new terminal.
Double clicking the sash will toggle the tabs view width between the "ideal" size which displays all the titles without truncating and a
narrow view that shows only the icons.
The tabs can be moved to the left side using the terminal.integrated.tabs.location setting.
Various other configuration settings available under terminal.integrated.tabs.
Terminal Statuses
Along with tabs, we have introduced the concept of statuses to the
terminal. A terminal can have many statuses, each of which represents
a state the terminal can be in temporarily, with the highest severity
one being displayed next to the tab. Status icons appear to the right
of the terminal title in the tabs view. On hover, details of the
status and any associated actions are presented.
On a tab associated with a terminal that requires a relaunch, a
yellow triangle with an exclamation mark is to the right of the
terminal title.
For now, these states are supported:
Relaunch needed: A warning icon status is used if extensions want to change a terminal's environment.
Disconnected: A plug icon status is used when the terminal loses its connection with its process.
Bell: A bell icon appears when the bell is enabled via the terminal.integrated.enableBell setting and the terminal bell
triggers.
We plan to support task states soon so that task run status is
available at a glance even without activating the tab.
And more at the link. From the Insiders Build:
NO EXTENSION REQUIRED, as docs say:
Ctrl+Shift+5
If enough space, you can press it multiple times. However, as always, extensions might be more sophisticated for the job.
They are called "Terminal Tabs" and you can un-check them to turn them off. Go to your VS code setting User->Features->Terminal and look for the section called "Integrated > Tabs:Enabled" and un-check it.
Requested by the community in https://github.com/Microsoft/vscode/issues/10546
Added in release 1.57 (https://github.com/microsoft/vscode/releases)
There is an extension that does this by adding tabs to the status bar: https://marketplace.visualstudio.com/items?itemName=Tyriar.terminal-tabs

How to move Output or Terminal back into the panel in the window layout?

Recently in VS Code, somewhere around v1.42 or v1.43, we gained the ability to move around the following windows/panels that used to be stuck in the panel:
Terminal
Output
Debug Console
Problems
They could be split into multiple items in the panel itself (side-by-side or top/bottom, depending on whether the panel was at the bottom or left/right), and even dragged into the side-bar.
This was great, but after moving all of these windows to the side-bar while experimenting, I can't find any way to move them back into the panel. The panel is now empty, except for 3 dots (an ellipsis) in the upper left corner. You can still hide/show the panel, and move it left, bottom, or right, but there is nothing in it, and you can't drag anything to it. Dragging the terminal into the panel shows an icon that looks like it will successfully move (it's not the icon with the circle/cross-out you get other places it won't drop), but when releasing the click-drag, nothing happens.
I had just upgraded to v1.45.0 when this happened. It appears to be a defect, unless I'm missing something. Does anyone have a way to put the terminal or one of these other windows back in the panel, or reset their position? I combed the settings, and tried to find default setting's files (system or user) that might hold info on what is in the panel vs. the sidebar, etc., but couldn't find anything via search or on my PC. Any ideas?
Note: This is NOT about moving the panel between the left/right/bottom positions, or selecting the terminal/output/etc. in the panel itself. That's "old news", this is a recent feature.
Here is a view with the Terminal, Output, Debug Console, and Problems put at the top of the sidebar toolbar, and Terminal focused. The Panel is just to the right of the sidebar window, set to the "left" position, completely blank and useless. The "welcome" window on the far right side:
And here are my current settings:
See this issue https://github.com/microsoft/vscode/issues/96117 (Empty panel behaves weird)
Suggested fix:
Run the command View: Reset View Locations in the command palette.
Please see: https://www.technipages.com/visual-studio-reset-window-layout
Menu Window / Reset Window Layout worked for me in VS 2019

Screen is broken when another window is displayed on top of vscode

While using Visual Studio Code, the screen is broken as shown in the following gif.
It is not visible in the gif file, but is being dragged with the another window open.
The same thing did not happen in other programs (e.g., visual studio community, source tree, etc.).
It also happened on other monitors connected to internal graphics cards.
When scrolling in vscode, the same symptoms occur in the parts that are not scrolling (such as the left menu section).
Updating the graphics card driver(geforce) fixed the problem
go to your vs code shortcut properties and add at the end of the path "--disable-gpu" example like these: "C:\Users\your-user\AppData\Local\Programs\Microsoft VS Code\Code.exe" --disable-gpu

Open Markdown Preview tab in New Window?

I have two monitors, one is my MacBook 13" that is very small to have multiple/split windows, and another one that I have my preview windows. When I'm writing a nodejs code that I store it on GitHub, I always edit some markdown files. The issue is:
I want to "detach" the Markdown Preview Windows to a "new window", so I can send it to my second monitor, so I can edit on one and see it on the other.
There are some similar questions on StackOverflow, but the solutions don't work for this case, because if I open another window/workspace and drag the preview window there, it does not update the preview when I save the original MD file... If I drag the preview window to the other monitor, it creates a "webview-panel" file.
E.g.: Markdown open a new window link
Any tips?
I tried with the default preview and the enhanced preview plugin, same results...
VS Code does not have built-in support for multi-monitor setup... sorry :)
The solution would be to simply open another window of VSCode, of the same workspace, and open there the preview of the markdown file, while keep editing in the original window.
Edit 1
Here are the actions to reproduce the solution:
Open 1st VSCode window with the project
Cmd-Shift-N to open a 2nd VSCode window
Point 2nd VSCode window to same project - but at a different root folder (as if it's the same - VSCode with just revert you to the 1st window
Open on the 2nd VSCode window the markdown file you wish to preview, and then hit Cmd-Shift-V
(Make sure you keep the tab of the markdown file open on the 2nd window as this is what VSCode Markdown preview uses to detect the file change events AFAIK)
Edit the file on the 1st window and viola, it will auto-refresh on the 2nd window preview
Edit 2
How-to video (Hosted on youtube)
Configure the 2nd monitor to have the same height as the 1st.
Stretch VS Code horizontally to span 2 monitors (am assuming this can be done on a Mac.) Now the left half of VS Code is on the 1st monitor, and the right half is on the 2nd.
Open the Markdown file in the left half of VS Code, and open the preview in the right half.
A bit of hack, but it works.
Just for those, who are still looking for a good solution to see the current changes to a Markdown file in real time in another window, you can use the Instant Markdown extension.
It provides a browser window in which the preview is displayed and also listens for changes in VSCode. Here you find more information about that package.
So I have this setup: one monitor aligned vertically for editing the source and the horizontal one one the right (or left, you can change that to your needs) shows the preview of my edit.
I use VS Code for Markdown and Tex, so its pretty cool to work like that. If you preview the stuff in the splitview you can set on the option to split it. So if you right click it and then go to Split up, your preview is down which you then can scale to your monitor size.

How to Display VS Code output window to side rather than below

In my VS Code set up I see the output/FSI frame below the main text editor pane like this:
whereas I would love it to appear to the right in the side-by-side view like it does on the images in this link: http://www.wintellect.com/devcenter/jwood/a-quick-look-at-f-in-visual-studio-code
Is there a config option I cannot find somewhere?
I tried Googling but drew a blank and cannot see anything obvious in the config options mentioned on the vs code site page describing the config options
as of version 1.51.1 right click in the right corner on the output panel. then select option 'move panel right'
I don't believe you can detach/move the output windows in Visual Studio Code. You can move the side bar to the left/right side, but that's it. There is no config option, sorry.
You could try posting a feature request on the GitHub page: https://github.com/Microsoft/vscode
EDIT: This was changed in VS Code 0.10.8, it was once on the side but was moved to the bottom. See this GitHub issue: https://github.com/Microsoft/vscode/issues/2806
This feature is not available yet in VS Code. However as of today (March 30, 2017) it's on 6 months roadmap so it should be done in a near feature.
This feature is available from version 1.18.0+
Simply click this icon to dock to the right:
Just follow the steps mentioned:
In Visual Studio Code -
View Tab > Appearance > Toggle Panel Position
That's it.
Your original link to the view your desire is obsolete, so it is a guess as to what you wanted. But here is a demo of setting up a terminal/output look side-by-side. It is a little tricky - you drag your Outline header over the Terminal header which will then allow you the option of putting it to the left or right of the Terminal:
its easy. just right-click on the terminal, select 'move panel right' like in the image below and voila
the image can be found here
Vertical Split:
From VS Code Menu bar:
View >> Appearance >> Move Panel Right
Version 1.47.0 of VS Code (at the moment of posting this, the latest one) allows you to drag output (or any other panel tab, e.g. terminal) to the activity bar. This way you can obtain output to the side of the editor.
Just right click on the panel of output section then select "Move panel left or right" as per your wish.
here your can see the move panel left option.
Press CTRL + SHIFT + P
Select Preferences: Open User Settings (JSON)
Insert (or change if it is there --search for it) the following config line:
"workbench.panel.defaultLocation": "right",
Save file.
That will work for new workspaces. VS-Code saves your preferences for each folder you start it in. So, if you navigate to a folder you previously called VS-Code in (I mean, from the terminal), it will open the output panel in the same location it was the last time you have used VS-Code from the same location.
After making the change above, go to a new place, like /opt and start VS-Code there to make a test.