質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

4回答

1776閲覧

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

junannko

総合スコア18

0グッド

1クリップ

投稿2018/03/19 06:38

編集2018/03/20 05:58

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

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

html

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

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

html

1<p>

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

html

1</p>

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

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

投稿2018/05/30 09:16

moro_is

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hgforteratail

2018/05/30 10:51 編集

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

2018/05/30 10:54

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

0

ベストアンサー

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

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

投稿2018/03/20 05:20

編集2018/03/20 06:03
hgforteratail

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

junannko

2018/03/20 05:58

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

2018/03/20 06:05 編集

開始タグから閉じタグまでの全ての行ですか。 残念ながらそれは知りません。 ごめんなさい。 私の例では配色テーマでハイライト範囲が変わるようです。
junannko

2018/03/20 06:06

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

2018/03/20 06:28

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

2018/03/20 06:31

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

2018/03/20 06:33

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

0

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

投稿2018/05/30 09:16

編集2018/05/30 09:19
moro_is

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

投稿2018/03/19 08:31

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

junannko

2018/03/20 03:24

ご回答ありがとうございます! インデント、自動整形なども対応しておりました。^^; 第三者が作成した長いソースを把握するのに件の機能があると便利だなー、と思いまして。 確かAtomにはズバリな拡張機能があったので、vs codeにもあれば御の字なのですが、無いのかもしれませんね。。
gyarison

2020/03/14 07:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問