【VSCode】HTMLの開始タグ・終了タグを同時に変更する設定方法|プラグインなど
今回はVisual Studio Code(以下、VSCodeと表記)で、HTMLの開始タグ・終了タグを同時に変更する設定方法の紹介となります。
【VSCode】HTMLの開始タグ・終了タグを同時に変更する設定方法
プラグイン「Auto Rename Tag」 を利用する場合
プラグイン「Auto Rename Tag」をインストールすると、HTML・XMLのタグ名を変更した際に、ペアとなるタグ名が自動的に変更できます。
VSCodeのプラグインをインストールする方法については、以下のリンク先を参考にしてみてください。
また、このプラグインのレビュー内に、「元に戻す」「やり直し」をする際に、履歴データが壊れるとの指摘がありましたが、筆者の環境では再現できませんでした。
VSCodeの設定を変更する場合(HTMLファイルのみ)
VSCodeの設定を変更することで、HTMLファイルのみですが、タグ名を変更した際にペアとなるタグ名が自動的に変更する機能(ミラーカーソル機能)を利用できます。
以下、設定の画面とsettings.jsonファイル、それぞれでの設定方法となります。
設定の画面から変更する場合
- VSCodeの画面左下にある歯車アイコンをクリックします。
- 表示されるメニューから「設定」を選択します。
- 設定内の上部にある検索ボックスで、「editor.linkedEditing」を検索します。
- 設定「editor.linkedEditing」が表示されるので、チェックボックスをオンに変更します。
また、以前のバージョンでは設定「editor.renameOnType」で変更していましたが、現在はこの設定は利用できません。
settings.jsonファイルから変更する場合
settings.jsonファイルを開き、設定を管理するオブジェクトに以下の要素を追加して保存します。
"editor.linkedEditing": true,
VSCodeの設定変更について
VSCodeの設定変更は、設定の画面、または設定変更を管理するJSONファイルで行います。記事内では、それらの詳細な利用方法は割愛していますので、詳しくは以下のリンク先を参考にしてみてください。