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

2022-07-112022-07-16Visual Studio Code 拡張機能,Visual Studio Code

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

Auto Close Tagのインストール

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

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

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

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

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

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

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

「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"
	]
}