補完の効かないDjango HTMLで爆速に開発を進める方法

どうもこんにちは、たくびー(@takubii)です。

私は普段ほとんどのコーディングをVScodeで行なっています。
VScodeは様々な言語でも補完が効いたり、予測変換を行ってくれるとても頼もしい相棒です。

今回はVScodeの設定を編集してコーディングスピードを上げるちょっとした小技を書きたいと思います。

経緯としましては、DjangoプロジェクトでHTMLを書いている時に中々かゆい所に手が届かないもどかしさを感じたのでそこを改善しました。

Emmetの設定

VScodeの設定からEmmetの設定を行います。
今回はDjango HTMLにHTMLと同じEmmetを適用させます。

settings.json

// 他の設定
"emmet.includeLanguages": {
  "django-html": "html"
},

Django HTML(素のHTMLも同様)で以下のようなタグを書く場合を想定します。

<div id="app" class="app-test">

次のように入力すると先ほどのコードが生成されます。

div#app.app-test

基本的には、idは#、classは.で指定します。
複数のクラスを指定したい場合は次のように.で繋げるだけです。(div.class-1.class-2.class-3)
titleなどの他の属性については[]で囲んで書きます。(例: div[title="Some title word"])

Emmetの使い道

HTMLのEmmetを使うことで補完の効かない言語でもid指定、class指定しながら閉じタグを自動で生成してくれます。
Djangoの独特の記法はDjango拡張機能に任せ、HTMLについてはEmmetで開発をしていくという方法が今の所ベストだという落としどころになりました。

普段のHTMLでも使えるのでEmmet記法を覚えることで開発スピードを上げつつコーディングが楽しくなってくると思います。

私は最近使い始めたばかりなので、まだまだ種類を覚えていませんが様々な記法があるので是非調べてみてください。
こちらとか参考になると思います。

所感

Visual Studio Codeのコード補完やEmmetは開発環境をとても良くしてくれるので、積極的に覚えて使っていきたいです。
今回はDjango HTMLでHTMLのコード補完が効かないという機会がありEmmetという存在を調べました。
トラブルや上手くいかないときこそ色々と調べてみると新しい発見があります。

それでは今回はこの辺りで締めたいと思います。
また機会があればお会いしましょう。良いエンジニアライフを！