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

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

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

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

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

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

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

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

VSCodeの設定を変更することで、HTMLファイルのみですが、タグ名を変更した際にペアとなるタグ名が自動的に変更する機能(ミラーカーソル機能)を利用できます。

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

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

  1. VSCodeの画面左下にある歯車アイコンをクリックします。
    VSCodeの画面左下にある歯車アイコンの画像
  2. 表示されるメニューから「設定」を選択します。VSCodeの画面左下にある歯車アイコンを選択した状態の画像
  3. 設定内の上部にある検索ボックスで、「editor.linkedEditing」を検索します。
  4. 設定「editor.linkedEditing」が表示されるので、チェックボックスをオンに変更します。

また、以前のバージョンでは設定「editor.renameOnType」で変更していましたが、現在はこの設定は利用できません。

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

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

"editor.linkedEditing": true,

VSCodeの設定変更について

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

参考サイトなど

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

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

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