The window in the picture
enter image description here
If you meant to ask us how to set up Visual Studio Code to automatically add closing tags to XML elements such as the element shown in the picture, afaik I don't think the software features this kind of functionality built in. You might have to go the way of using add-ons, such as these two:
Auto Close Tag for Visual Studio Code
Auto Close Tag by Jun
Han
A web search could easily bring up a couple more. Go ahead and give it a try; if it isn't what you want, please edit your question and make it clear to us.
Okay, after some further research, there is an open issue on getting more control over those hover popups see disable hover in editor.
The suggestion is to use the undocumented setting:
"editor.hover": false,
which works after a restart of vscode. You must restart vscode to get it to work. Unfortunately that applies to all files of any kind and
"[html]": {
"editor.hover": false,
}
does not work so you have to use just
"editor.hover": false,
instead.
Related
I am a new Flutter learner, and this is kinda annoy me, I think the "Problems" tab under is fully understand, I don't want to see warning next to my code. Is there a way I can disable or hide it? Thank you.
Hey, In visual studio code you can do minute changes.
Step1:
Press ctrl+shift+p , a command pallet will open
Step2:
Type settings.json and click on Open Settings (JSON)
a file will open
step3:
Add this lines in that
"editor.codeActionsOnSave": {
"source.fixAll": true
}
**After this whenever you save, const will be added automatically.
Note: Sometimes you might get error because after saving some widgets are prefixed with const but, sometimes when your values in widget get dynamic, there will be a error, so be careful.
disable this line or add source.fixAll to config.json
Perhaps you are using some vscode plugin like https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens to show code diagnostics.
Though that feature seems very useful to me incase you find that annoying you may disable it by going through your list of extensions.
When I right click in the editor, vs code executes whatever menu item the cursor happens to be over. It happens far too fast for me to make my actual choice known.
I have already spent 30 minutes trying to find a solution. If you search for "right click" in the Command Palette, you are told there are no matches. You don't get any hits in the docs, either. Please advise. Thank you.
It has been reported that the situation you mentioned is a bug in the repository on GitHub. It is reported that Visual Studio Code works fine when zoom is disabled.
You can update the following setting to override this behavior:
"editor.mouseWheelZoom": false
Or you can update the mouseWheelZoom setting from the pop-up window by using the shortcut CTRL + , to go to Settings.
It's crazy, but this is still an issue for Linux users after so many years. Especially, when using a Laptop with touch-pad it makes VSCode frustrating to use. The problem occurs when you use "native" window style (you can tell, because the theme will not be applied to context menus) and have a non-default zoom.
The GitHub issue that #sercan linked to has a few solutions. In order to save you some time, there is basically two things that I found work and make sense:
Set your zoom level to default / 0. In settings.json add: "window.zoomLevel": 0 This works with all window styles, but obviously is not always viable
Change the title bar style from native to custom. In settings.json add: "window.titleBarStyle": "custom" This will change how the title bar but also the context menus look. Setting this, you can zoom in again
I have a code with many comments, how can I hide these ones, but no delete, I need them after.
I need to hide all the comments in one click, not a simple collapse one
Can't find such feature as well.
Read this issue from GitHub - https://github.com/Microsoft/vscode/issues/46505
Seems like that VSCode can't do it (from the box) and all people waiting for that feature.
I was looking for a way to do that too as I put way too many comments making it hard to debug... and I came across this https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-hide-comments it makes all the comments invisible, but it leaves special characters in place. There are also commands to toggle show/hide.
Hide Comments - Visual Studio Marketplace
We now have an extension for that. On the editor title, a toggle action is available to show/hide the comments quickly.
You can download from inside Visual Studio 2022 called unobtrusive code and it will hide all comments and put "+" symbols on the collapsed line to the left of your code that you can open or close them with. It works great.
*** TO GET THE EXTENSION: ***
I went to the Extensions menu at the top of VS 2022 and chose manage extensions.
Then in the manage extensions window that opens up, choose online then Visual Studio Marketplace. In the search at the top right of the manage extensions window type in unobtrusive code. download it and then exit Visual Studio. You should see a window pop up to install it.
When you start VS 2022 again and open a C# script, it should have all the comments minimized to the "plus symbols" to the left of the code!
Hope it works for anyone wanting to hide their comments.
I made this window disappear. How do I recover it?
Those are called breadcrumbs in most IDEs. In VSCode, it's no different.
Find the setting by going to your settings and searching "Breadcrumbs".
If you choose to not use the fancy settings editor, you can manually add this to your configuration:
"breadcrumbs.enabled": true
Update
As of May 2019 (version 1.35), breadcrumbs are enabled by default in VSCode. They can still be toggled using the steps outlined above.
Beware that even if you have breadcrumbs turned on in settings and the Language is selected, you will have to save the file in order to get breadcrumbs in VS Code 1.52.1
I'd like to add one more thing to Ian MacDonalds answer:
You can simply toggle them within the "View"-menu View > Toggle Breadcrumbs :
Looking into using VS Code over PHP Storm and there's one major feature I haven't been able to replicate. Not sure if the community knows of any available plugins or a native way to enable this.
I'm hoping this is the best place to ask, since the VS Code doesn't really have a community section besides recommending asking questions on here.
In PHPStorm when you have your cursor on a closing tag it'll have a little floating line showing you where the opening tag is. Great for knowing exactly what closing tag you're viewing, and it's attributes.
Also, when you're in a tag you can see this down at the bottom, basically the entire tree of where you are.
These are the last few major PHP Storm features I don't think I could live without. If anyone knows of a way to replicate either of them I'd be very grateful.
Thanks!
The HTML End Tag Labels extension could help you. It shows the id or class, depending on what is given after the closing tag.
End Tag Labels on VSCode Marketplace
[I tested this in an html and js file but not a php file.]
// Controls whether the editor should highlight the active indent guide
"editor.highlightActiveIndentGuide": true,
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": true,
These are the defaults and then I suggest the following colorCustomizations:
"editorIndentGuide.activeBackground": "#fff8",
"editorIndentGuide.background": "#fff0",
The second one above makes all the inactive guides transparent and the first makes the active guide middle grayish.
To highlight the matching tags, see match tag extension
With that extension, try this setting:
"highlight-matching-tag.style": {
"borderWidth": "2px",
"borderStyle": "solid",
"borderColor": "red",
"borderRadius": "5px"
},
You will need to reload vscode when you make changes to this extension's settings for them to take effect.