Visual Studio Codeで開始タグを修正すると自動で閉じタグも修正してくれる拡張機能「Auto Rename Tag」

HTMLタグを修正するときに、地味に面倒なのが、開始タグと一緒に閉じタグも修正する必要があることです。
忘れることはないですが、階層が複雑になっていて<div>が大量にあったりすると、対応する閉じタグを間違えてしまうこともあるかもしれません。

今回は、開始タグを修正するときに一緒に閉じタグも修正してくれるVisual Studio Code拡張機能「Auto Rename Tag」についてまとめておきます。

Auto Rename Tag

marketplace.visualstudio.com

Auto Rename Tag - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

Auto Rename Tagはインストールするだけで、HTMLの開始タグを修正時に、一緒に閉じタグも修正してくれる拡張機能です。
対応するタグを間違える心配や、修正忘れを防げますし、単純に記述量が半分で済みます。

ちなみに、HTMLファイルだけでなく、VueやReactなどのテンプレートファイル内でも同じように動作します。

「Auto Close Tag」は不要

一緒に「Auto Close Tag」という拡張機能も紹介されていることがあります。
こちらは開始タグを新規で入力したときに、自動で閉じタグも入力してくれる拡張機能ですが、この機能はVisual Studio Codeのデフォルトの機能で備わっています。

デフォルトではオンになっていて、設定画面の「Auto Closing Tags」で切り替えられます。

基本的な使い方

特別なにか設定をする必要はないので、HTMLファイルを開いて開始タグを修正すれば、自動で閉じタグも修正されます。

開始タグを修正しているとリアルタイムで修正が反映されていきます。
動きに重さを感じることもなく、違和感もありません。

設定の変更

使用する言語の設定

使用する言語を設定したい場合は「”auto-rename-tag.activationOnLanguage”」内に配列で使用したい言語名を入力します。

{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}

ちなみに["*"]という風にアスタリスクを使えば全言語で使えるようになります。