Reputation: 9491

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

Upvotes: 30

Answers (10)

Digital Alchemist

Reputation: 690

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)"
         }
     }
 }

Upvotes: 4

fabio.sang

Reputation: 905

VSCode now supports matching tag highlighting by default:

Upvotes: 3

saroj baskota

Reputation: 17

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

Upvotes: 2

Neo

Reputation: 130

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

Upvotes: 2

Gamiiis

Reputation: 403

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"
 },

Upvotes: 39

CFo

Reputation: 109

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.

Upvotes: 0

Rox

Reputation: 361

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

Upvotes: 5

phocks

Reputation: 3273

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.

Upvotes: 1

Aleksey Dubinskiy

Reputation: 184

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

Upvotes: 10

kwood

Reputation: 10924

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

Upvotes: 7

Visual Studio Code not matching html tags

Answers (10)

Related Questions