Zenn
🌟

【VSCode】htmlやcss以外のファイルでもEmmet補完ができるようにする

に公開
Django
VS Code
tech

VSCode で HTML や CSS ファイルに対して Emmet が使えます。

この便利機能をほかのファイル（django-html など）でも使えるように設定します

settings.json を変更しよう

下記手順でsettings.jsonを開きます

  1. Ctrl ＋ Shift ＋ , （Mac：Command ＋ Shift ＋ , ） もしくは  F1  でコマンドパレットを開き、「基本設定」と検索
  2. 「基本設定：ユーザー設定を開く(JSON)」を選択する
"emmet.includeLanguages": {"Emmetを使いたいファイルの拡張子": "html or css"}

※もしかしたら html や css 以外にも有効な値があるかもしれません、、、

django-html で HTML 補完を使用したい場合は、一番最後の「｝」の前に以下のコードを追加して、保存します

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

エラーが出る場合は、直前にカンマがないことが原因かもしれません

django-html で確認してみる

django-html のファイルを開き、「！」→ Tab キーと入力します

以下の画像のように HTML テンプレートが展開されれば OK です

参考文献

https://tech-blog.cloud-config.jp/2020-05-20-vscode-emmet-not-html/

https://meshikui.com/2020/02/18/2360/

Discussion