Visual Studio Code | HTMLの閉じタグを自動補完する拡張機能「Auto Close Tag」

2022-07-16Visual Studio Code 拡張機能,Visual Studio Code

Visual Studio Code

VScodeの拡張機能、HTMLの入力時に閉じタグを自動的に補完して閉じる「Auto Close Tag」の使い方を紹介しています。

確認環境

Windows10 デスクトップPC
Visual Studio Code バージョン 1.68
Auto Close Tag バージョン 0.5.14

Auto Close Tagのインストール

「Auto Close Tag」は拡張機能の検索で「auto」と検索すれば上位に表示されます。

インストール後、他の拡張機能や特別な設定は必要はなく、そのまま利用可能になります。

Auto Close Tagの基本的な操作と使い方

「Auto Close Tag」の基本的な操作を紹介しています。

  • HTMLでタグを入力すると自動的に閉じタグを追加して保管します。
  • 閉じタグの追加タイミングは開始タグの「>」を入力した時です。
  • 既に閉じタグがある場合は追加しません。
  • タグのリネーム時は閉じタグは自動的に変換されません。
HTMLの閉じタグを自動補完する
HTMLの閉じタグを自動補完する

「Auto Rename Tag」という拡張機能を使ってタグのリネーム時は閉じタグは自動的に変換する事が可能です。

Auto Close Tagのショートカットキー、コマンド

「Auto Close Tag」には以下のコマンド、ショートカットキーが用意されています。

コマンドショートカットキー機能
Close TagAlt + .一番近いタグを閉じる
Auto Close Tagのコマンド、ショートカットキー

Auto Close Tagのオプション設定

「Auto Close Tag」にはオプション設定が用意されています。

auto-close-tag.SublimeText3Modede

「</」が入力されたときに閉じるタグを自動的に追加するようにする。

{
    "auto-close-tag.SublimeText3Mode": true
}

auto-close-tag.enableAutoCloseTag

閉じるタグを自動的に挿入するかどうか。
デフォルトではtrueが設定されています。

{
    "auto-close-tag.enableAutoCloseTag": true
}

auto-close-tag.enableAutoCloseSelfClosingTag

自動終了タグを自動的に閉じるかどうかを設定する。
デフォルトではtrueが設定されています。

{
    "auto-close-tag.enableAutoCloseSelfClosingTag": true
}

auto-close-tag.insertSpaceBeforeSelfClosingTag

フォワードスラッシュの前にスペースを挿入するかどうか。
デフォルトではfalseが設定されています。

{
    "auto-close-tag.insertSpaceBeforeSelfClosingTag": false
}

auto-close-tag.activationOnLanguage

拡張機能をアクティブにする言語を設定します。

{
    "auto-close-tag.disableOnLanguage": [
        "php",
        "python"
    ]
}

デフォルトでは全ての言語が有効に設定されています。

auto-close-tag.excludedTags

自動的に閉じないタグリストを設定する事が可能です。

デフォルトではすべてのタグ名が有効となっています。

{
    "auto-close-tag.excludedTags": [
        "area",
        "base",
        "br",
        "col",
        "command",
        "embed",
        "hr",
        "img",
        "input",
        "keygen",
        "link",
        "meta",
        "param",
        "source",
        "track",
        "wbr"
    ]
}