Visual Studio Codeで閉じタグをハイライトさせたい

Question

こんにちは。
いつもお世話になっております。

Visual Studio Codeでhtmlコーディングをしております。
例えば、

<p>テストです</p>

というソースが合った場合、

<p>

のタグ上をクリック、またはオンマウスすると

</p>

の閉じタグがハイライトなどされて、明示的にわかるような拡張機能、エクステンションをさがしております。
「このタグはここからここまでを囲っているよ」
ということを把握して、
長いソースなどでタグ抜けを防ぎたいのです。
（うっかりが多いので。。^^;）
ご存じの方、どうかご教授くださいませ。
何卒よろしくお願い致します。

【追記】

現在このように、タグ単体でのカッコの閉じタグはハイライトされます。
ですが、<p>開始タグから、</p>閉じタグをハイライトしたいと考えております。

Answer 1

今更かもしれませんが同じものを探していて下記みつけたので共有します。

highlight-matching-tag

デフォルトの設定も悪くはないですが、設定ファイルから下記のようにして使ってます。

  "highlight-matching-tag.enabled": true,
  "highlight-matching-tag.style": {
    "backgroundColor": "rgba(0,0,0,.2)",// ダーク系のテーマなら "rgba(255,255,255,.2)"
    "borderRadius": "2px",
  },
  "highlight-matching-tag.rightStyle": {
    "borderWidth": "0",
  },
  "highlight-matching-tag.leftStyle": {
    "borderWidth": "0",
  }

Comments

[hgforteratail]

このまま基本設定に貼付けて、私はダークテーマなので"rgba(255,255,255,.2)"として貼付けてみたのですが、変更されたところが確認できませんでした。
テーマはOne Dark Proです。
やり方がまずいんでしょうか？
というより、どこが変化するのかの具体的な情報が欲しい。

[moro_is]

わたしの環境ではテーマに関係なく動作したので、再起動しても変わらないなら他に問題があるのかもしれませんね。
どこがどう変化するか等はすべてリンク先にスクリーンショット付きでわかりやすく書かれてますよ！

Answer 2

タグをクリックした時、その行とその閉じタグがハイライトする機能ありますよ。
標準だと思ってましたが、そうじゃないんですか。
ちょっとハイライトが薄いですけど。

追記
上記は配色テーマがMonokaiの時で、Ayu One Dark に変更するとクリックしたタグと閉じタグのハイライトになりました。

Comments

[junannko]

ご回答をありがとうございます！
なんと。そのような機能が？！
質問内容に追記させていただきました。
私の環境では上記のような状態です。

[hgforteratail]

開始タグから閉じタグまでの全ての行ですか。
残念ながらそれは知りません。
ごめんなさい。

私の例では配色テーマでハイライト範囲が変わるようです。

[junannko]

おお。
なるほど。
配色テーマでカバーしているものがあるのですね！
その方向で調べてみます！
ありがとうございます！

[junannko]

追記ありがとうございます！
たすかります。
仰っていただいたテーマで試したところ、閉じタグがハイライトされました！
テーマだったとは。
これで作業効率が上がりそうです！
ご丁寧にご対応いただきありがとうございました！今後もがんばります！

[hgforteratail]

お役に立てて良かったです。

[junannko]

*^_^*
ありがとうございます！

Answer 3

二重投稿のため削除します。

Answer 4

てっとり早いのは，以下のページにありますインデントの見える化でしょうか．

https://qiita.com/84zume/items/476a29264fdc98d98201

それとは別に，VS Codeをデフォルトのキーマップで使用しているのであれば，Ctrl + Alt + Fで自動整形されます．
インデントと自動整形されます．まずは，ミスをなくすのも重要です．

Comments

[junannko]

ご回答ありがとうございます！
インデント、自動整形なども対応しておりました。^^;

第三者が作成した長いソースを把握するのに件の機能があると便利だなー、と思いまして。
確かAtomにはズバリな拡張機能があったので、vs codeにもあれば御の字なのですが、無いのかもしれませんね。。

[gyarison]

解決されている問題の為、今更蛇足かとは存じますがちょうど良いプラグインが見つかったので記載しておきます。
'Highlight Matching Tag'というプラグインが、正にぴったりな機能を提供してくれています。