Screen is broken when another window is displayed on top of vscode - visual-studio-code

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

Related

Visual Studio Code exit button position [duplicate]

I was working on the visual studio application.
And suddenly, my window control buttons hopped to the left side of the main menu navbar,
hiding the buttons File & Edit.
Does anyone know how to re-placing the windows control buttons back to the right side of the navbar?
In vscode v1.71.2 the window.experimental.windowControlsOverlay.enabled setting has been disabled by default.
This bug was released in vscode v1.71. It may be related to using RTL languages. I would assume this will be fixed in a point release.
Try disabling this setting:
window.experimental.windowControlsOverlay.enabled
from [windows default close button location moved on its own when updating to v1.71.0][1]

With Visual Studio Code, any way to pin border between project window and source window?

I'm often recording visual studio code sessions to video files. I often find that after closing and re-opening VS Code that the vertical slider between the project window (where my files are listed in a tree), and the source window (where my code is) has moved to some default position which is not what I want.
My question is, is there a way in VS Code to always have VS Code start with the slide in a given position. That is, like what is in the picture below.

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.

Visual Studio Code tab width

Is there any way to set the maximum width for the tab in visual studio code. I can specify this in visual studio 2015 when I install productivity power tool, but I want to know if this is possible with visual studio code.
The only thing I was able to find while doing some quick research on VS Code User Guide was that in the Settings editor you can change the tabWidth either to shrink or to stay large enough to view the file name.
// Controls the sizing of editor tabs.
// - fit: Always keep tabs large enough to show the full editor label.
// - shrink: Allow tabs to get smaller when the available space is not enough to show all tabs at once.
"workbench.editor.tabSizing": "fit",
In VS Code you can access the editor's tab size settings by pressing Command+Comma (Mac) or Ctrl+Comma (PC), and typing tabsizing. You can edit settings for regular and pinned tabs.
Currently there are two options for sizing editor tabs: fit and shrink.
A handy shortcut is that the tab area recognizes a mouse scroll-wheel.
If you have Tab Sizing set to fit, and you have several tabs opened so that they scroll off the screen, hover your mouse pointer over a tab then scroll. This will bring more tabs into view.
It would be nice if Microsoft provided a means to stack tabs in Visual Studio Code.
2022 Update: VS Code now has a workbench setting named Wrap Tabs. To edit this press Command+Comma (Mac) or Ctrl+Comma (PC), type Wrap Tabs and check that box.
As lenooh pointed out, to have smaller tabs (what I came here for), better use
"workbench.editor.tabSizing": "shrink",

Visual Studio Code: How to have both Debug window and Explorer window open together?

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