【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 を開く

https://qiita.com/y-w/items/614843b259c04bb91495

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

  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist",
  ],

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

Auto Close Tag の設定を変更する

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

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

  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist",
    "django-html", // 追加
  ],

"django-html"ではなく、すべてのファイルをサポートするために"*"でもよいが、python ファイルなどほかのファイルでも有効になりそう

動作確認

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

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

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