【VSCode】html以外のファイルでもhtml補完ができる!
2020-05-20
azblob://2022/11/11/eyecatch/2020-05-20-vscode-emmet-not-html-000.jpg

はじめに

最近Djangoを触っています、國友です。やっぱりPythonはすばらしい。すごいシンプルな話ですが、解決策に至るまで結構時間がかかったので共有します。
DjangoのテンプレートHTMLを書いていたとき、ふとHTMLのタグの補完がされていないことに気がつきました。言語モードはDjango HTML。せっかくPythonの埋め込みはハイライトされるのに...HTML補完ができない...
言語モードをHTMLに選択しなおすしかないのか...そんなことを思ってました。
いや、でも解決策はあるはず!
そう思いググり続けること1時間、やっと答えにたどり着けました。

環境

  • VScode最新版
  • 拡張機能:Django(Preview) 一番インストール数が多かったから入れた。

問題点

Django HTMLのシンタックスハイライトは効いてるけどHTMLの補完ができない.... 🥺

解決策

VScodeには補完をするEmmetが入っているので、Emmetに含む言語を追加すれば解決。
settings.jsonに以下を追記する。(Django HTMLの場合)

"emmet.includeLanguages": {
    "django-html": "html",
},

おわりに

その他にもvue-htmlにhtml,css補完を持たせたりできます。Emmetは上手く使えば爆速コーディングができるらしいです。ググればチートシートとかがでてきます。
実はDjangoの拡張機能のドキュメントにしっかり書いてありました。ちゃんとドキュメントは読むべきですね。 しかし僕のdjango環境ではうまくいきませんでした...なぜだろう...
このissueが解決することを願うのみ。