フリーランスWebエンジニア HTNCode

▲
  • HOME
  • ABOUT
  • SERVICE
  • ACHIEVEMENT
  • BLOG
  • CONTACT
  • githubIcon
  • twitterIcon
プライバシーポリシー
footerLogoImage

© HTNCode All Rights Reserved.

eyecatch

Jinjaテンプレートを快適に使うための設定

作成日時:2024年3月20日 23:51

更新日時:2024年3月20日 23:58

コラム

Python

Flask

はじめに

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

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

 

今回は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