Visual Studio Code remove tag highlight - tags

I want to remove the highlighting of a tag when my cursor is on it. For example Visual Studio Code shows a paragraph tag like this: [<]p[>] where I want it to show like this <p>. See image for an example.
Example image

In your settings.json put:
// Highlight matching brackets when one of them is selected.
"editor.matchBrackets": false,
That will stop the behavior you see, but will do it for all supported languages (so also javascript for example). You can change that setting for only html by :
"[html]": {
"editor.matchBrackets": false
}

It appears that this has changed since the other answers were posted:
Value is not accepted. Valid values: "always", "near", "never".(1)
Use this instead:
"editor.matchBrackets": "never"

Try this
"editor.selectionHighlight": false
Ref -> https://www.samundra.com.np/disable-annoying-highlight-in-visual-studio-code/1666

Related

How to disable highlighting matched parens in VS Code?

I find this distracting:
I found the "editor.guides.highlightActiveBracketPair" setting and disabled it the settings (Ctrl+,), but nothing changed. I restarted the editor, but nothing changed. I checked ~/.config/Code/User/settings.json, and saw that it was there:
"editor.guides.highlightActiveBracketPair": false,
But still no change. I even added it again in a Python-specific block, because I learned how to do that when I went on a similar journey trying to change default indent for YAML files:
"[python]": {
"editor.guides.highlightActiveBracketPair": false
}
But still no change.
The answer is:
"editor.matchBrackets": "never",
The setting is listed in the reference:
// Highlight matching brackets.
"editor.matchBrackets": "always",
However, the reference doesn't list the possible options. I correctly guessed "never", but afterwards, I searched for "brackets" in the app settings (Ctrl+,) and found the setting with a drop-down box with all three possible values:
always
near
never

VSCODE: Line under the function showing scope

I don't know exactly the name of this, so I don't know what I'm searching for. I saw in some programming videos that when the cursor is inside a function it shows a line that goes under the function and then down until the end of the function scope (like in the image below).
is this an extention or a setting? how can i enable it? Can someone please help me?
as #rioV8 said in the comments, it is a setting called Editor › Guides: Bracket Pairs.
Thanks
This was apparently implemented recently (2021/22). I'm running v1.68.1 and it is available. The new setting is actually called bracketPairsHorizontal. If that is false, the horizontal line won't show.
Edit your settings.json file and add the following:
// Bracket-pair guides
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true, // shows horizontal line
"editor.guides.highlightActiveBracketPair": true, // highlight both horizontal and vertical lines
// Bracket-pair colorization
"editor.bracketPairColorization.enabled": false,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
// Indentation lines
"editor.guides.indentation": true // shows vertical lines
Some settings depend on each other, ex. bracketPairs will override indentation.
Result with above settings:

Change color of matching words, selected text, and matching brackets in Visual Studio Code

I am trying to figure out if it is possible to change the foreground/background color of three things in Visual Studio Code. Is there a setting for these?
matching words
In this screenshot, my cursor is on thisTest in line 15 and so all instances of thisTest are "highlighted". I have not selected the word. My cursor is between the s and T.
selected words
In this screenshot I have selected true.
matching brackets
In this screenshot my cursor is after } and both { and } are highlighted
sorry for being late to the party. Let me share the configuration that works for me. In the settings.json file, you should have the following objects:
"workbench.colorCustomizations": {
"[Hack The Box]": {
// ... omitted for brevity
"editor.selectionBackground": "#ff0000",
"editor.selectionHighlightBackground": "#9fef00",
}
},
In my case, I had to overwrite the config of the Hack The Box I use. Let me recap the keys used:
editor.selectionBackground: manages the selected words scenario
editor.selectionHighlightBackground: manages the matching words scenario
Now, let's switch to brackets. For some time, the extension Bracket Pair Colorizer has been deprecated. To overcome this, you should update to the latest version VSCode. Then, be sure to have these settings (adjust based on your preferences):
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": false,
"editor.guides.highlightActiveBracketPair": false,
"editor.autoClosingBrackets": "always",
Note that these settings are not scoped to a certain theme.
Let me know if this solve your issue!

VS Code HTML mode option to turn off auto close tags

I cannot figure out the option to turn off the new "feature" where the VS Code HTML mode editor types stuff for you in the following scenario:
I type <b> and when I hit that last > it then types </b> which I then have to delete and move to where I want it.
How do I keep VS Code from typing stuff for me in this case? I have these two options set like this:
"editor.quickSuggestions": false,
"editor.autoClosingBrackets": false,
Sort of the opposite of this question: VSCode not auto completing HTML
I found it:
// Enable/disable autoclosing of HTML tags.
"html.autoClosingTags": true,
This new feature shipped with autoClosingTags set to true by default, which was, unfortunately, a disruptive change if you were used to being able to type without random stuff being inserted into your document as a side effect.
Setting autoClosingTags to false restores the original behavior.
"html.autoClosingTags": true,
"html.autoClosingTags": true,
Does not work for me .. maybe misleading or bug
I do a workaround to change the type of the file down the editor to handlebars or another language because it was very frustrating for me that the editor insists to add something I understand I do not need like closing tag while the closing tag should be at footer file.

How to set markdown snippet trigger automatically

According to the official document, https://code.visualstudio.com/docs/languages/markdown
Snippets for Markdown
There are several built-in Markdown snippets included in VS Code -
press Ctrl+Space (Trigger Suggest) and you get a context specific list
of suggestions.
Does there any way, trigger snippet automatically when I type word, because it's troublesome, press Ctrl+Space
Try setting:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
},
This enables IntelliSense automatically when you start typing. By default, this will show snippets and word based suggestions (suggestions based on words in the current document). To disable word based suggestions, set:
"[markdown]": {
"editor.quickSuggestions": true,
"editor.wordBasedSuggestions": false
}
You can also set:
"editor.snippetSuggestions": "top"
If you always want snippets to show before word base suggestions
There is an inconsistency in VS Code and it is a known issue. Markdown snippets do not get auto-completion. Probably it will be fixed in next release.
Yes this is an inconsistency. Full extensions get auto (7x24) completion by default (e.g. latex, cake), some built-in extensions like Markdown do not.
https://github.com/Microsoft/vscode/issues/1617#issuecomment-166999086