【Django×VSCode】HTMLで閉じタグを自動生成できるようにする

最近、Djangoの勉強をしている、ひすいです。

htmlを使用してるのですが、なぜか閉じタグが自動生成されないので、調査しました。

まず現状を把握

VSCodeの「Auto Close Tag」という拡張機能を用いて、
開始タグを記述すると、自動で閉じタグを生成するようにしています。

例えば、<p>と書いてみます(10行目)

(一般的なhtmlファイル)

このように開始タグ(<p>)と入力すると、自動で閉じタグ(</p>)が生成されます

(djangoのhtmlファイル)

djangoのhtmlでは閉じタグ(</p>)が自動生成されない….

原因はなにか？

拡張子は同じでもファイルの種類が違う？？

どちらも拡張子はhtmlなので、拡張機能が動作するはず…

よく見ると、一般的なhtmlファイル(__html__.html)と
djangoが使用するhtmlファイル(index.html)のアイコンが違うな

んー、拡張子は同じだけど、ファイルの種類としては別として認識されてるのかな？？

調べてみる

「Ctrl + p」(mac：command + p)でコマンドパレットを開いて、
「language」と記入

「基本設定：言語固有の設定を構成します」をクリックし、「html」と記入

htmlにも2種類あるのか。

おそらく

• 一般的なHTML -> HTML (html)
• DjnagoのHTML -> Django HTML (django-html)

と、VSCodeでは認識されるみたい。

Auto Close Tagの設定を確認する

VSCodeの設定を開き、右上のアイコンからsettings.jsonを開く

VS Codeのsettings.jsonの開き方 - Qiita

方法1: 設定画面から1. 1. 設定画面を開くショートカットキーcommand + ,(Windows: Ctrl + ,)または、メニューバーから基本設定 > 設定 で設定画面を開きます。…

qiita.com

settings.json内にこのようにAuto Close Tagの設定がされています。

確かに、HTMLはサポートされてるが、django-htmlはサポートされていなさそう

Auto Close Tagの設定を変更する

先ほどの設定を見ると、ファイルの種類を足せば設定できそう

なので、「djnago-html」と足してみる

動作確認

閉じタグ生成されたーーー

細かいことですが、設定しておくとしないとでは、作業効率が大きく異なります

ぜひ設定してみてください