はじめに

本業の期替わりに伴い、繁忙に突入し、ご無沙汰してしまいました。

本記事のテーマとは関係ないですが、今更ながら、やっと基本情報技術者の資格を取得することができました。
引き続き、今まで独学でやってきた内容をフロントエンド・バックエンド共に深め、成長に努めたいと思います。

今回はPythonのFlaskフレームワークで、Jinjaテンプレートを使う快適に使うための、VSCodeのsettings.jsonの設定についての備忘録です。

ファイルの関連付け

まず、VS Codeに.htmlファイルをJinjaテンプレートとして扱うように指示します。これにより、Jinjaテンプレートのシンタックスハイライトや自動補完が有効になります。

"files.associations": {
    "*.html": "jinja-html"
}

Emmetの設定

Emmetは、HTMLやCSSのコーディングを高速化するために便利な機能の一つですが、デフォルトの設定ではJinjaテンプレートに対しては動作しません。そのため、EmmetにJinjaテンプレートをHTMLとして扱うように指示します。

これにより、Jinjaテンプレート内でもEmmetのスニペットや自動補完を利用できます。

"emmet.includeLanguages": {
    "jinja-html": "html"
}

フォーマッターの設定

まず、VS Codeには、コードのフォーマットを自動で整える機能があります。これを利用すると、コードの可読性を高めることができます。例えば以下は、Prettierというフォーマッターをデフォルトで使用するように設定しているものです。

"editor.defaultFormatter": "esbenp.prettier-vscode",

ただし、Jinjaテンプレートに対しては自動フォーマットをオフにすることをおすすめします。

なぜなら、JinjaテンプレートのシンタックスがHTMLと異なるため、自動フォーマットによってコードが意図しない形に変更される可能性があるからです。以下の設定を追加し、保存と同時に自動整形されないようにできます。

"[jinja-html]": {
    "editor.formatOnSave": false
}

おわりに

以上、FlaskでJinjaテンプレートを使う時に設定しておくことでコードを書くのが楽になる設定について書いてみました。

他にも人によってお勧めの設定は色々あると思いますので、自分に合った設定を見つけてみてください！

ご参考になれば幸いです。

それではまた。

HTNCode