VSCode で HTML タグの変更を簡単にできる拡張機能 Auto Rename Tag

HTML で利用するタグは基本的には開始タグと閉じタグでセットになっており、両方を利用することで囲われた範囲をその要素の内容とする。タグの名前を編集する場合にも当然開始タグと閉じタグを両方とも編集する必要があるが、HTML を頻繁に書くのであれば結構な手間だ。

エディタに VSCode を利用しているのであれば、Auto Rename Tag という拡張機能を試してみよう。

この拡張機能を利用すると、タグを編集した際に対応するタグの名前も自動的に変更してくれるようになる。例えば、以下のように div の開始タグを section に変更すると、終了タグも自動的に変更してくれる。

Auto Rename Tag - Visual Studio Marketplace

単純に文字を入力する手間が半分になるので、非常に効率的ではないかと思う。

例では HTML ファイルで行ったが、React や Vue などのテンプレートでも同じようにタグを変更できる。自分も HTML ファイルを扱う事よりも React や Vue で開発する事が多いため、テンプレートを編集するのに便利な拡張機能となっている。

HTML や Vue, React などのテンプレートを編集する機会が多いのであれば導入しておくと作業効率が良くなるだろうと思う。