Visual Studio Code(VSCode)でHTMLの閉じタグを快適に入力する方法について、解説します。
この記事を書いた人
![](https://saishono.blog/wp-content/uploads/2022/09/writerprofile20220925-900x243.png)
当ブログの信頼性・成長記録(開く)
【2023年2月5日】
過去28日間でGoogle検索における当ブログへのクリック数が6K(6000)クリックに到達しました。
![](https://saishono.blog/wp-content/uploads/2023/02/click6k_web-730x900.png)
- Visual Studio Code(VSCode)のHTML閉じタグ入力補完について基本機能と拡張機能の違い
- HTML閉じタグ入力補完のカスタマイズ方法
【Visual Studio Code】HTML閉じタグの補完(自動入力)設定
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-1-900x546.png)
Visual Studio Code(VSCode)には、HTMLの閉じタグを補完(自動入力)する機能がデフォルトで備わっています。
しかし、上の画像のように、PHPファイル(言語モードがPHPの場合)などでは機能しません。
「Auto Close Tag」という拡張機能をインストールすると、言語モードがHTML以外でもHTML閉じタグが補完(自動入力)されるようになります。
HTML閉じタグの補完(自動入力)が機能する場所について、Visual Studio Code(VSCode)の基本機能と拡張機能の違いを下記の表にまとめました。
※ PHPファイルを例にしています。
VSCode基本機能(HTML:Auto Closing Tags)
言語モード | PHPタグ内 | PHPタグ外 |
---|---|---|
PHP | × | × |
HTML | × | ○ |
VSCode拡張機能(Auto Close Tag)
言語モード | PHPタグ内 | PHPタグ外 |
---|---|---|
PHP | ○ | ○ |
HTML | ○ | ○ |
![](https://saishono.blog/wp-content/uploads/2022/09/add82658dd7f31abe94b11483c43e16b-150x150.png)
拡張機能なら、どこでも機能するわけね
Visual Studio Code(VSCode)の拡張機能「Auto Close Tag」をインストールすれば、場所や言語モードを気にせずHTMLの閉じタグが補完(自動入力)されるようになりますよ。
▼Auto Close Tagについて
▼拡張機能のインストール方法
【Visual Studio Code】補完(自動入力)の方法を変更する
Auto Close Tagは閉じタグを補完(自動入力)してくれて便利です。
ただ、先にテキストがあったとき、後からHTMLタグを入力すると、閉じタグがテキストの前に出てきてしまいます(下の画像)
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-2-900x555.png)
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-2-900x555.png)
閉じタグをいちいち削除しなければならなくなり、面倒ですよね。
そこで、HTML閉じタグの補完(自動入力)方法を変えて、テキストの後に </ を入力したら閉じタグが出てくるように設定します。
カスタマイズ(設定)方法
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-3-900x342.png)
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-3-900x342.png)
Visual Studio Code(VSCode)の画面を開きます。
①画面左下の歯車マークをクリックするとメニューが出てきます。メニューの「設定」をクリックします。
②画面上部の検索ボックスに「sublime」と入力します。
③「Auto-close-tag:Sublime Text3 Mode」という項目が出てくるので、チェックを入れます。
設定画面を閉じて、PHPファイルを開きます。
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-4-900x396.png)
![](https://saishono.blog/wp-content/uploads/2022/03/20220324-4-900x396.png)
「てすと」(テキスト)の前に <span> (HTMLタグ)を入力しても閉じタグは出てこなくなります。
「てすと」の後に </ (HTML閉じタグの一部)を入力して、 </span> (HTML閉じタグ)が補完(自動入力)されることを確認します。
確認したら、設定完了です。
![](https://saishono.blog/wp-content/uploads/2022/09/aefc0e11e6a13a7d3527632034372bc6-150x150.png)
![](https://saishono.blog/wp-content/uploads/2022/09/aefc0e11e6a13a7d3527632034372bc6-150x150.png)
![](https://saishono.blog/wp-content/uploads/2022/09/aefc0e11e6a13a7d3527632034372bc6-150x150.png)
おつかれさまでした!
![](https://saishono.blog/wp-content/uploads/2022/01/20220123-1-450x225.jpg)
![](https://saishono.blog/wp-content/uploads/2022/01/20220123-1-450x225.jpg)