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 を登録
• ［ビルド・オプション］で「自動ビルド中」にのみチェック
• 「プロジェクト → 自動ビルド」を有効化

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

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

🎉 まとめ

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