はじめに
Visual Studio Codeの拡張機能であるAuto Complete Tagが提供する機能は、Visual Studio Codeの基本設定だけで代替可能です。
この記事では、拡張機能をインストールすることなく、HTMLタグの自動閉じタグ補完機能と自動タグ名変更機能を有効にする方法を紹介します。
Auto Complete Tag
VS Codeの拡張機能にAuto Complete Tagというものがあります。
Auto Complete TagとはAuto Close TagとAuto Rename Tagの機能を合わせたもので、この拡張機能を有効にするとHTMLタグの自動閉じタグ補完(Auto Close Tag)と自動タグ名変更(Auto Rename Tag)ができるようになります。
Auto Close Tag
- 開始タグの閉じ括弧を入力すると、終了タグが自動的に挿入されます。
Auto Rename Tag
- 一方のHTMLタグの名前を変更すると、対になるHTMLタグの名前も自動的に変更されます。
設定方法
1. 自動閉じタグ補完(Auto Close Tag)
command + ,
で設定を開くAuto Closing Tags
で検索HTML: Auto Closing Tags
にチェックを入れて設定を有効にする
settings.json
を直接編集する場合は以下を記入。
{ "html.autoClosingTags": true }
2. 自動タグ名変更(Auto Rename Tag)
command + ,
で設定を開くEditor: Linked Editing
で検索Editor: Linked Editing
にチェックを入れて設定を有効にする
settings.json
を直接編集する場合は以下を記入。
{ "editor.linkedEditing": true }
※editor.renameOnType
は廃止されeditor.linkedEditing
に変更(Visual Studio Code November 2020)
【参考】
- VS Code: You don't need that extension
- コードを書くのが楽になる!知っておくと便利なVS Codeの機能・設定のまとめ | コリス
- Visual Studio Code User and Workspace Settings
- settings.jsonの開き方
shift + command + P
でコマンドパレットを開くopen settings
で検索Preferences: Open User Settings (JSON)
を選択