PR

【VSCode使用者向け】自動でタグの修正をして開発を効率化する方法

Visual Studio Code
記事内に広告が含まれています。

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.jsonauto-rename-tag.activationOnLanguage を設定することで、有効にしたい言語を設定することができます。
また、デフォルトでは全ての言語で有効になっています。

まとめ

この記事では、「Auto Rename Tag」を使用してタグを自動で修正する方法に関して紹介しました。

HTMLだけでなくVueやReactの開発等のタグの修正時にも役立ちます。
便利な拡張機能なので、是非積極的に利用してみてください!

コメント

タイトルとURLをコピーしました