Eclipse に Prettier を導入してコード整形を自動化する方法

Web制作やチーム開発で「インデントがずれてる」「スペースかタブか」で揉めた経験、ありませんか？
Prettier はそんな “フォーマット論争” からチームを解放してくれる自動整形ツールです。
VS Code では定番ですが、Eclipse でも同じように運用できます。

１．導入背景 〜フォーマットで揉めないチームに〜

特に Web 系チームでは「誰の書いたCSSだけインデント違う」「セミコロン問題」などが発生しがちです。
コードレビューがスタイル論争になるのは時間のムダ。Prettier を導入すれば、すべて機械的に揃えてくれます。

• VS Code と同じルールを Eclipse にも適用できる
• Node.js ベースなので、プロジェクトごとに統一ルールを共有可能
• 保存・ショートカットから簡単に自動整形を実行できる

つまり、「フォーマットは機械に任せる」文化を Eclipse でも再現できる、ということです。

２．成功ルート（確定した設定手順）

今回は「外部ツール呼び出し方式」で、Eclipse に Prettier を組み込みます。

Step 1：Node.js と Prettier をインストール

node -v
# v22.1.0（動作確認済み）

npm install -g prettier
prettier -v
# 3.6.2

次に、Prettier の実行ファイルの場所を確認します：

where prettier

📍例：C:\Program Files\nodejs\prettier.cmd

Step 2：Eclipse に外部ツールとして登録

メニューの ［実行］→［外部ツール］→［外部ツールの構成...］ から「プログラム」を新規作成し、以下のように設定します。

Step 3：ショートカットで即整形（Ctrl + Shift + R）

Prettier は「外部ツール」として登録されているため、個別にショートカットを割り当てることはできませんが、外部ツール起動ダイアログを呼び出すショートカットを登録すれば、すばやく Prettier を実行できます。

① ショートカットを登録する

• メニューから ［ウィンドウ］→［設定］→［一般］→［キー］ を開く
• 検索ボックスに 外部ツール と入力
• 一覧から 外部ツールの選択実行（Run External Tool...） を選択
• 下の「バインディング」欄に Ctrl + Shift + R を入力
• 「適用して閉じる」で保存

これで Ctrl + Shift + R で外部ツール実行ダイアログを呼び出せるようになります。

② 実際の使い方

• Ctrl + Shift + R を押す（外部ツール実行ダイアログが開く）
• 矢印キーまたはマウスで「Prettier フォーマット」を選択
• Tabキーで「実行」ボタンにフォーカスを移動
• Enterキーで Prettier 実行！

慣れると「Ctrl + Shift + R → Enter」で一瞬で整形できます。VS Code のフォーマットショートカット感覚で使えるのがポイントです。

下図のようにアイコンから「Prettirer フォーマット」を選択して実行することもできます

Step 4：保存時に自動整形（任意）

保存時にも Prettier を実行したい場合は、「自動ビルド」と「外部ツールビルダー」を利用します。

• プロジェクトを右クリック → ［プロパティ］→［ビルダー］
• ［新規］→［プログラム］で同様に Prettier を登録
• ［ビルド・オプション］で「自動ビルド中」にのみチェック
• 「プロジェクト → 自動ビルド」を有効化

３．フォーマット設定

Eclipse で Prettier を利用する場合、整形ルールはプロジェクトルートの .prettierrc ファイルに定義します。
この設定ファイルは、チーム全体で統一したコードスタイルを維持するための「フォーマット仕様書」のようなものです。
ここで指定したルールに基づき、Eclipse から外部ツールとして Prettier を実行すると、すべてのソースコード（HTML / CSS / JavaScript）が同じ基準で整形されます。

整形ルール

この設定では、基本ルールを全言語共通で定義したうえで、
ファイルの種類ごとに細かい違いを「overrides」で上書きしています。

.prettierrc に書きます。
.prettierrc はプロジェクトのルートディレクトリに配置します。
例としてオススメの内容を記します。

{
    "printWidth": 120,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "lf",
    "embeddedLanguageFormatting": "off",
    "proseWrap": "never",
    "overrides": [
        {
            "files": ["*.js", "*.mjs", "*.cjs"],
            "options": {
                "printWidth": 140,
                "tabWidth": 4,
                "singleQuote": true,
                "trailingComma": "none",
                "htmlWhitespaceSensitivity": "ignore",
                "embeddedLanguageFormatting": "off"
            }
        },
        {
            "files": ["*.html", "*.htm"],
            "options": {
                "printWidth": 100,
                "tabWidth": 4,
                "singleQuote": false,
                "bracketSpacing": false,
                "htmlWhitespaceSensitivity": "ignore", 
                "embeddedLanguageFormatting": "auto",
                "proseWrap": "never"
            }
        },
        {
            "files": ["*.css", "*.scss"],
            "options": {
                "printWidth": 100,
                "tabWidth": 4,
                "singleQuote": false,
                "bracketSpacing": true,
                "semi": false
            }
        }
    ]
}

除外ディレクトリ・ファイル

Prettier では、整形対象から除外したいファイルやフォルダを .prettierignore に記述します。
このファイルは .gitignore と同じ構文で書くことができ、
Eclipse から外部ツールとして Prettier を実行した場合も同様に参照されます。

.prettierignore に書きます。
.prettierignore はプロジェクトのルートディレクトリに配置します。
例としてオススメの内容を記します。

node_modules/
dist/
build/
vendor/

*.min.js
*.min.css

４．困ったときは（トラブルと対処）

• ショートカットにPrettierが出てこない：
  外部ツールの直接キー割り当ては不可。Ctrl + Shift + R 経由で実行する。
• 保存時に動かない：
  「プロジェクト → 自動ビルド」が有効になっているか確認。
• 別の選択肢：
  「AnyEdit ツール」プラグインを使えば、保存時に外部コマンドを自動実行可能。

まとめ

これで Eclipse でも VS Code と同じように、Prettier による統一フォーマットを実現できます。
フォーマットの話で議論する時間を減らし、開発そのものに集中できる環境が整いました。