1. はじめに

Visual Studio Codeの拡張機能であるAuto Complete Tagが提供する機能は、Visual Studio Codeの基本設定だけで代替可能です。

この記事では、拡張機能をインストールすることなく、HTMLタグの自動閉じタグ補完機能と自動タグ名変更機能を有効にする方法を紹介します。

2. Auto Complete Tag

Visual Studio Codeの拡張機能にAuto Complete Tagというものがあります。

Auto Complete TagとはAuto Close TagとAuto Rename Tagの機能を合わせたもので、この拡張機能を有効にするとHTMLタグの自動閉じタグ補完(Auto Close Tag)と自動タグ名変更(Auto Rename Tag)ができるようになります。

2-1. Auto Close Tag

  • 開始タグの閉じ括弧を入力すると、終了タグが自動的に挿入されます。

Auto Close Tag

2-2. Auto Rename Tag

  • 一方のHTMLタグの名前を変更すると、対になるHTMLタグの名前も自動的に変更されます。

Auto Rename Tag

3. 設定方法

3-1. 自動閉じタグ補完(Auto Close Tag)

  1. command + ,で設定を開く
  2. Auto Closing Tagsで検索
  3. HTML: Auto Closing Tagsにチェックを入れて設定を有効にする

settings.jsonを直接編集する場合は以下を記入。

{
  "html.autoClosingTags": true
}

3-2. 自動タグ名変更(Auto Rename Tag)

  1. command + ,で設定を開く
  2. Editor: Linked Editingで検索
  3. Editor: Linked Editingにチェックを入れて設定を有効にする

settings.jsonを直接編集する場合は以下を記入。

{
  "editor.linkedEditing": true
}

※editor.renameOnTypeは廃止されeditor.linkedEditingに変更(November 2020 (version 1.52))

【参考】