HTMLタグを修正するときに、開始タグを修正する→終了タグも修正するのは地味に面倒ですよね。
修正したい箇所が複数あったり、階層が複雑だったりするとより大変ですね。
本記事では、そんな時に役立つVSCodeの拡張機能のAuto Rename Tagに関して紹介します。
「Auto Rename Tag」の使用例
「Auto Rename Tag」を導入すれば、開始タグ・終了タグの名前を編集すると相互に自動補完されます。
上の例では開始タグをh3→h1に変更しており、内容が終了タグにも自動反映されていることが確認できます。
「Auto Rename Tag」の導入方法
以下を行うことで、簡単にインストールできます。
- VSCodeのサイドバーで「拡張機能」を選択
- 検索欄に「Auto Rename Tag」を入力
- 「Auto Rename Tag」の右下にあるInstallボタンをクリック
有効にするプログラミング言語の設定
settings.json
のauto-rename-tag.activationOnLanguage
を設定することで、有効にしたい言語を設定することができます。
また、デフォルトでは全ての言語で有効になっています。
まとめ
この記事では、「Auto Rename Tag」を使用してタグを自動で修正する方法に関して紹介しました。
HTMLだけでなくVueやReactの開発等のタグの修正時にも役立ちます。
便利な拡張機能なので、是非積極的に利用してみてください!
コメント