'Visual Studio Code not matching html tags

I am using visual studio code for writing html but it doesn't have the feature of identifying closing tag for the current selected one. How can I achieve the same?

Here is how it looks on VS Code:

Can you suggest any extension or how can I achieve this? VS Code 1.7.1

visual-studio-code

Solution 1:^[1]

install this extension

highlight-matching-tag

and change the settings.json to

"highlight-matching-tag.leftStyle": {
    "borderWidth": "0 0 0 3px",
    "borderStyle": "dotted",
    "borderColor": "red",
    "borderRadius": "5px"
 },

Solution 2:^[2]

I think you chose PHP or something else for "language mode", change it on HTML

Solution 3:^[3]

I'm not sure if you have any extensions installed that break the highlighting? If I use your example, it highlights the closing tag fine by default:

Additionally, there is a builtin Emmet command that jumps between the beginning/closing tag. In the command palette, you can search for 'Emmet: Go to Matching Pair".

If you bind it to a shortcut, you can press that for example twice to see the cursor jumping between your tag. The name of the command to bind is editor.emmet.action.matchingPair

Solution 4:^[4]

I was having the same issue and HTML snippet extension solve it. Just install it Html snippet

and just do some changes in setting, goto file->preferences->setting, you can now see User settings in the right hand side, add the following code

,"files.associations": {
    // extension name : html
    "*.php": "html",
    "*.html": "html"
}

and you are ready to go. Enjoy :)

Solution 5:^[5]

VSCode now supports matching tag highlighting by default:

Solution 6:^[6]

Install "Bracket Pair Colorizer" extension. File -> Preference -> Settings -> User Settings(Text Editor). You can edit in json view.

Solution 7:^[7]

first confirm your visual studio have this extension it install default but for safe side you can check and solve highlight problem with matched div with this steps:

Go to the visual studio and type Ctrl+P
Make sure
Open preferences > setting
Paste this:

"editor.occurrencesHighlight": false,
"highlight-matching-tag.styles": {
  "opening": {
    "name": {
      "underline": "red"
    }
  }
}

first line for disabled highlights.

you can choose color : red or anything else may be it's help to you

@thank you

Solution 8:^[8]

The best visual way that i found to do this is with a plugin highlight-matching-tag

"highlight-matching-tag.styles": {
     "opening": {
         "full": {
             "highlight": "rgba(165, 153, 233, 0.3)"
         }
     }
 }

Solution 9:^[9]

I was having this issue too. If you click and drag it selects all words with that text highlighted, but if you just single click it seems to select the closing tag. So yeah just single click a tag to get the pair, don't double click or click and drag.

Solution 10:^[10]

I was having this same issue with Some Tags matching and highlighting while others don't.

The Weird thing was if I created a new file, and put a bunch of tags in they all highlighted correctly.

Turns out that that the person that created the original page used </br> for line breaks. This broke the highlighting of open and closing tags where a </br> happened between them. I changed the </br> to <br /> and everything is happy now.

It also happened with <link></link>, that I fixed by removing the closing tag.

I would suggest that if you are having this issue to look for closing tags that are not needed/ required.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alberto
Solution 2	Aleksey Dubinskiy
Solution 3	kwood
Solution 4	Manfred Radlwimmer
Solution 5	Rob Bednark
Solution 6
Solution 7	Shamrai Aleksander
Solution 8
Solution 9	phocks
Solution 10	CFo

'Visual Studio Code not matching html tags

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]