【VSCode】HTMLの開始タグ・終了タグを同時に変更する設定方法|プラグインなど

今回はVisual Studio Code(以下、VSCodeと表記)で、HTMLの開始タグ・終了タグを同時に変更する設定方法の紹介となります。

【VSCode】HTMLの開始タグ・終了タグを同時に変更する設定方法

プラグイン「Auto Rename Tag」 を利用する場合

プラグイン「Auto Rename Tag」をインストールすると、HTML・XMLのタグ名を変更した際に、ペアとなるタグ名が自動的に変更できます。

VSCodeのプラグインをインストールする方法については、以下のリンク先を参考にしてみてください。

また、このプラグインのレビュー内に、「元に戻す」「やり直し」をする際に、履歴データが壊れるとの指摘がありましたが、筆者の環境では再現できませんでした。

VSCodeの設定を変更する場合(HTMLファイルのみ)

VSCodeの設定を変更することで、HTMLファイルのみですが、HTMLのタグ名を変更した際に、ペアとなるタグ名が自動的に変更できます。

以下、設定の画面とsettings.jsonファイル、それぞれでの設定方法となります。

設定の画面から変更する場合

  1. 画面上部のメニュー内にある「ファイル」>「基本設定」>「設定」を選択し、設定の画面を開きます。
  2. 設定内の検索ボックスで、設定IDの「editor.renameOnType」を検索します。
  3. 指定した設定が表示されるので、チェックボックスをオンに変更します。

settings.jsonファイルから変更する場合

settings.jsonファイルを開き、設定を管理するオブジェクトに以下の要素を追加して保存します。

"editor.renameOnType": true,

VSCodeの設定変更について

VSCodeの設定変更は、設定の画面、または設定変更を管理するJSONファイルで行います。記事内では、それらの詳細な利用方法は割愛していますので、詳しくは以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。