はじめに
VScode のショートカットが効かなかったので、下記の方法で対応しました。
こちらのページを参考にさせていただきました。
動作環境
MacOS 15.6.1
VSCode 1.103.2
手順
index.html を作成します。
名前はなんでも。
ファイルの言語モードを html に変換します。
(画像の場合は、右下の {} Django HTML の部分をクリック )
検索窓が開くので html と入力します。
HTML を選択すると、右下が {} HTML になります。
Shift + ! を入力します。
補完機能が働き「!」と「!!!」が表示されます。「!」を選択します。
ひな形が入力されました。
Visual Studio Code には Emmet （HTML や CSS を省略記法で入力できるプラグイン）が標準搭載されていて、その機能を利用しています。
補足
Visual Studio Code にDjango 拡張機能を入れている場合。
-
{} Django HTMLで{}タグを使いたい - 通常の
HTMLタグの自動補完も利用したい
この場合は、settings.jsonに"emmet.includeLanguages"を追加します。
settings.json
// Emmet 設定
"emmet.includeLanguages": {
"django-html": "html" // 自動補完設定。djangoテンプレートをHTMLとして扱う
},
...
こうすると、{} Django HTML モードで以下のことができるようになります。
-
{}が見やすく - HTML タグの自動補完も有効になり
-
Shift + ! を入力してHTMLテンプレート利用
今はAI機能で初めから完璧なコードも書けてしまいますが、基礎も大切にしたいので、テンプレートを入れたかった。この方法なら基本のテンプレートを入れることができ、学習に役立ちます。