この記事では、Prettier + jinja-plugin を使ってテンプレートタグを壊さずに整形する方法 を解説します。

はじめに

初心者です。

Django や Jinja のテンプレートを VS Code で編集すると、{% %} や {{ }} を含む HTML の自動整形でインデントが崩れることがあります。

こうなってほしいのに...

html

<div>
    {% if user %}
        <p>{{ user.username }}</p>
    {% endif %}
</div>

自動整形でこうなる！😭

html

<div>
    {% if user %}
    <p>{{ user.username }}</p>　⬅️ インデントされない
    {% endif %}
</div>

HTML タグは整形されてほしい
{% %} や {{ }} は壊れずインデントされてほしい

VS Code で Django / Jinja テンプレートを Prettier で安全に整形する方法

試行錯誤をまとめたものです。

実行環境

macOS 15.6.1
Visual Studio Code 1.103.2

1. 必要なツールの準備

VS Code
Prettier 拡張 (esbenp.prettier-vscode)
Node.js / npm

⬇️ ツールの準備方法です。
Node.js / npm　と　Prettier 拡張 が入っていない場合は参照してください。

拡張機能　Prettier

VSCode の拡張機能を検索して Prettier を入れます。

Node.js / npm

npm は Node.js に付属するパッケージ管理ツールで、プラグインをインストールする際に使います。
「VS Code で Prettier を動かすために必要な土台」です。

インストール方法

どちらかの方法で Node.js / npm をインストールします。

方法１公式サイトのインストーラーを使う（初心者向け）

公式サイトにアクセス：https://nodejs.org/
LTS（推奨）版 をダウンロード
ダウンロードした .pkg ファイルをダブルクリックしてインストール
mac のターミナルを開き、以下で確認：

node -v
npm -v

Node.js と npm のバージョンが表示されれば成功

メリット：簡単で迷わない
デメリット：バージョン管理は柔軟ではない

方法２ Homebrew を使う（ターミナルでインストール）

Homebrew がインストール済みなら、ターミナルで以下を実行できます。

# Node.js をインストール
brew install node

# バージョン確認
node -v
npm -v

メリット：複数バージョンの管理がしやすい
デメリット：Homebrew が必要

💡 ポイント

初めてなら 公式サイトのインストーラー がおすすめ
ターミナルで管理したい場合や複数バージョンを切り替えたい場合は Homebrew がおすすめ

2. Node.jsプロジェクトを初期化

VSCode でプロジェクトを開く、またはプロジェクトに移動します。

# プロジェクトルートに移動
cd myproject

Node.jsプロジェクトを初期化

npm init -y

これで package.json が作成されます。

3. Prettier プラグインのインストール

プロジェクト単位でインストールします。

プロジェクトルートで実行

npm install --save-dev prettier prettier-plugin-jinja-template

-g（グローバル）ではなく、プロジェクト単位でインストールするのがポイント！
依存関係はそのプロジェクトだけに追加される（ローカルインストール）
チームメンバーが npm install するだけで同じ環境を再現可能

インストール済みか確認するには:

npm list --depth=0
# prettier-plugin-jinja-template@2.1.0 などが表示されれば OK

4. `.prettierrc` 設定ファイルの作成

プロジェクトルートに .prettierrc を作成して、以下を記述します。

.prettierrc

{
    "tabWidth": 4,
    "useTabs": false,
    "plugins": ["prettier-plugin-jinja-template"],
    "overrides": [
        {
            "files": ["*.html", "*.djhtml"],
            "options": {
                "parser": "jinja-template"
            }
        }
    ],
    "singleQuote": false,
    "trailingComma": "es5",
    "semi": true,
    "printWidth": 150,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "endOfLine": "lf"
}

ポイント

tabWidth / useTabs → インデント幅を統一
plugins → Jinja / Django テンプレート専用プラグイン
overrides → HTML / Django テンプレート専用の parser 指定

"overrides"までが必要な最小コードです。その他は、 JS / HTML の整形ルールです。

5. VS Code 側設定（`settings.json`）

VS Code 側でも Prettier を有効にします。

【 settings.json　ファイルの開き方】
左下の ⚙️ 歯車 > コマンドパレット > 「基本設定：ユーザー設定を開く(JSON)」を選択 > json コードを追加

settings.json

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true

html ファイルのフォーマットに prettier を使う
formatOnSave → 保存時に自動整形
既存のコードとの重複に注意してください

6. 整形を試す！

サンプルコードを試してみましょう。
.html ファイルを保存すると、自動でPrettierが実行されます。

html

{% extends "base.html" %}

{% block content %}
    <div class="profile">
        {% if user %}
            <h2>{{ user.username }}さんのプロフィール</h2>
            <ul>
                {% for item in user.items %}
                    <li>{{ item.name }}</li>
                {% endfor %}
            </ul>
        {% else %}
            <p>ログインしてプロフィールを表示してください。</p>
        {% endif %}
    </div>
{% endblock %}

7. `.gitignore` に書く

GitHub に push　するなら以下を行ないます。

🚫 .gitignore に書くべきもの

以下はGitに含めない方がいいファイルやフォルダです：

.gitignore

# Python仮想環境
myvenv/

# Node.js依存パッケージ
node_modules/

# VS Code個人設定
.vscode/

# OSやエディタの一時ファイル
.DS_Store
*.swp

💡 node_modules/ は巨大で環境依存なので、必ず .gitignore に入れてください。
他の人は npm install で自動的に再構築できます。

補足

✅ 他の人が使うときの手順（Mac/Linux/Windows共通）

他の人が使う流れ

ステップ	内容
① クローン	`git clone` でプロジェクト取得
② 環境確認	Node.jsとnpmがあるか確認
③ インストール	`npm install` で依存パッケージ導入
④ 整形確認	VS Codeで保存 or `npx prettier` 実行
⑤ 任意設定	`.vscode/settings.json` を共有するか検討

① GitHubからプロジェクトをクローン

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

② Node.jsとnpmがインストールされているか確認

node -v
npm -v

💡 なければ Node.js公式サイトからインストール

③ 依存パッケージをインストール

npm install

これで package.json に記載された Prettier と prettier-plugin-jinja-template が node_modules にインストールされます。

④ VS Codeで開いて整形確認

VS Codeでプロジェクトフォルダを開く
.html ファイルを開く（例：templates/sample.html）
保存してみる（editor.formatOnSave: true が有効なら自動整形）

✅ VS Codeの設定が必要な場合

他の人が .vscode/settings.json を使って整形環境をすぐ再現できるように、プロジェクトに含めるのもアリです。ただし、個人設定が混ざる可能性があるので注意。

例：

settings.json

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true

これで、他の人が使っても、同じJinja整形環境が再現できます。