Highlight Matching Tag installs statistics

<p align="center"> <img src="https://images2.imgbox.com/c6/c3/sLkQluHb_o.png"> </p> <p align="center"> <a title="Average rating" href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag#review-details"> <img src="https://img.shields.io/visual-studio-marketplace/r/vincaslt.highlight-matching-tag?style=flat-square"> </a> <a title="Unique downloads" href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag"> <img src="https://img.shields.io/visual-studio-marketplace/d/vincaslt.highlight-matching-tag?style=flat-square"> </a> <br/> <a title="Master Web Development" href="https://a.paddle.com/v2/click/16413/111559?link=3267" targer="_blank"> <img src="https://img.shields.io/badge/Master%20Web%20Development-Try%20The%20Educative.io%20Platform%20→-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge"> </a> <br/> </p> <p align="center"> <i>If you're serious about your software development career,<br/>There's no better platform to learn programming online than <a href="https://www.educative.io/explore?aff=Vp6m" targer="_blank">Educative.io</a>.<br />Their courses are excellent and your subscription supports this plugin.</i> </p>

VSCode Highlight Matching Tag

GitHub repository: https://github.com/vincaslt/vscode-highlight-matching-tag

This extension highlights matching opening and/or closing tags. Optionally it also shows path to tag in the status bar. Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.

Officially supported markup: HTML and JSX. Other flavors (XML, Vue, Angular, PHP) should work, but there are no guarantees. Feel free to report the issues on them anyway.

Features

Extension Settings

You can override any default settings with your own values. The plugin supports workspace settings as well as global user settings.

Variable	Default	Description
highlight-matching-tag.enabled	true	Enables/disables the highlighting and status bar
highlight-matching-tag.showPath	true	Enables/disables showing path to tag in status bar (e.g. div > p > a)
highlight-matching-tag.showRuler	true	Enables/disables showing highlighted tag pair in ruler section
highlight-matching-tag.highlightSelfClosing	false	Should self-closing tags be highlighted too (can be useful for multiline self-closing tags)
highlight-matching-tag.highlightFromContent	false	Whether to highlight matching tag from inside the tag content
highlight-matching-tag.highlightFromName	true	Whether to highlight matching tag from the tag name
highlight-matching-tag.highlightFromAttributes	true	Whether to highlight matching tag from the tag attributes
highlight-matching-tag.noDefaultEmptyElements	false	Don't use default HTML empty elements
highlight-matching-tag.customEmptyElements	null	Custom empty elements in addition to the default HTML empty elements
highlight-matching-tag.styles	{ opening: { name: { underline: 'yellow' } } }	Custom styling configuration, see Styling Options

Styling Options

By default, the tag pair's names are underlined with a yellow line. The setting looks like this:

"highlight-matching-tag.styles": {
  "opening": {
    "name": {
      "underline": "yellow"
    }
  }
}

Custom styling

Version 0.8.0 of this extension introduces new styling options, but old custom settings can be automatically migrated after update.

Now you can change highlighting styles by providing your own style in User Settings (JSON) as highlight-matching-tag.styles. The setting accepts an object with two fields:

• opening: Style - opening tag styles when highlighting (or both, if closing style is not provided)
• closing: Style - closing tag styles, optional
• inner: Decoration - styles of text between opening and closing tags, optional

Style objects can have any combination of fields defining styles for parts of the tag:

• name: Decoration - decoration for name part of tag
• left: Decoration - decoration for left side of tag (character <)
• right: Decoration - decoration for right side of tag (character >)
• full: Decoration - decoration for the whole tag (including < and >)

Decoration objects define tag's style with optional fields:…