VSCode JavaScript syntax highlighting - visual-studio-code

I've recently returned to using VSCode after a long break. It seems that after updating, the syntax highlighting colours have changed to this:
From this:
Does anybody know how to achieve the look in the second image? I really can't stand the inconsistent brace colouring. If this isn't a change made in updates and I'm doing something wrong, please let me know

It appears you want to disable the bracket pairs colorization.
Here's a blog post from the VSCode team, talking about this new highlighting feature introduced recently : https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization
To do so, set the following settings to false :
"editor.bracketPairColorization.enabled": false,
"editor.guides.bracketPairs": false,

Related

Suppress syntax function help popups in VS Code/VSCodium

I'm using VSCodium to write some Python, and using the Python/Intellisense/Pylance Extension and an annoyance is the constant pop-ups explaining every basic function to me.
For example if I start to type a print() statement it pops up a large box with all the syntax details of writing a print statement, which blocks my view of much of my code. I'd like to just be able to type without the big pop-up suggestions.
I tried under the Preferences > Settings > text editor and there are pages and pages of "suggest:" option check boxes there, and though I tried several, none helped. Not sure if that's the right place to look.
I tried to change the Quick Suggestions Delay to 5000ms but it seems to have no effect on that instant popup on typing print( as well.
I'm starting to think perhaps there is another set of settings that controls this, but there are so many and none seem to be making a difference.
I am using editor.quickSuggestions and editor.suggestOnTriggerCharacters turned off for that purpose:
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
},
"editor.suggestOnTriggerCharacters": false,
…and it works for me for languages I am using; not using Python at this point.

VS Code Stop Showing InlayHints Types on methods/functions/objects/etc

I have enabled viewing the types in VS Code, and now I don't remember how to turn it off or where I turned it on.
I've disabled all my extensions to make sure it wasn't one of them haha. So it looks like a VS Code Setting I can't seem to find.
As shown above here pointed out by the red box and arrows.
Greatly appreciate it, driving me crazy at the moment however very helpful at first.
I found it, hope this helps someone else - it was the inlayHints for javascript displaying all that.
Open up settings for VS Code, Ctrl + Shit + P to open command palette, type "Open Settings" and selected the JSON option. I had the following set to true, switched to false.
"javascript.inlayHints.enumMemberValues.enabled": false,
"javascript.inlayHints.functionLikeReturnTypes.enabled": false,
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.propertyDeclarationTypes.enabled": false,
"javascript.inlayHints.parameterTypes.enabled": false,
"javascript.inlayHints.variableTypes.enabled": false,
You can find it under Inlay Hints via the UI too rather than editing json:

VSCode's intellisense doesn't work after intellisense's auto-highlighting

After using intellisense to auto-complete some code, it often highlights some argument place holder text/value.
But while its highlighted, the intellisense stops working.
I have to click the esc key to get out the highlighting to continue using intellisense.
(if any of you use the macbook with the touch bar, you know how much effort it is to press the esc key đŸ¤®)
The highlighting might be hard to see, but its there the whole time I am typing "con"
Anyone know how get intellisense working without turning off the auto-highlighting feature?
(also anyone know the official/unofficial name of the highlighting feature?)
The issue was in VS Codes languages settings for Dart.
Changing the snippetsPreventQuickSuggestions setting to false will solve the issue.
can be global...
{
"editor.suggest.snippetsPreventQuickSuggestions": false,
}
or language specific...
"[dart]": {
"editor.suggest.snippetsPreventQuickSuggestions": false,
},

How can I stop VS Code Intellisense from automatically appearing?

When I'm not working in JavaScript, Intellisense is unfortunately not often terribly helpful. How can I make it only appear when I hit controlspace, and not just appear automatically?
I don't want to turn it off completely. I just want it to only appear when I explicitly ask it to.
Although the VS Code Intellisense documentation does not define "Quick Suggestions", apparently "quick suggestions" is Intellisense—or is the visible face of it. (Are there also slow suggestions? I have no idea. The name seems to suggest being just one aspect of Intellisense, but... it turns out that it seems to be pretty much the central thing.)
So to stop Intellisense from appearing uninvited, you have to turn off "quick suggestions". Here's how I did that, in my user settings:
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},

Way to view opening tag when closing tag selected in VSCode?

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.