フロントエンド - ビルド・ツール

Prettier ぷりてぃあ

コードフォーマッター自動整形ESLintコードスタイルCI/CDJavaScript

Prettierについて教えて

簡単に言うとこんな感じ！

Prettierは「コードの見た目を自動で整えてくれるツール」だよ！インデントがバラバラとか、クォートが混在してるとか、そういう「書き方のクセ」をぜんぶ自動で統一してくれるんだ。チームで開発するときに「書き方論争」がなくなる魔法のツールってこと！

Prettierとは、JavaScriptをはじめとする多くのプログラミング言語のコードを自動で整形（フォーマット）してくれるツールです。インデントの幅、クォートの種類（シングル・ダブル）、1行の文字数の上限など、コードの「見た目のルール」を自動で統一してくれます。

開発チームでは「インデントはスペース2つか4つか」「セミコロンはつけるかつけないか」といったスタイルの議論（いわゆる スタイル論争）が起きがちです。Prettierはそういった議論を「ツールに任せて終わり」にすることで、チームの生産性を上げることを目的に作られました。

2017年にオープンソースとして公開されて以降、フロントエンド開発の現場では事実上の標準ツールとなっており、VS CodeなどのエディタやCI/CDパイプラインと組み合わせて使われています。

Prettierは「Opinionated（意見の強い）」ツールと自ら称しており、設定項目をあえて少なくして「ツールが正解を決める」思想で作られています。

Prettierは非常に多くの言語・ファイル形式に対応しています。

設定を完全になくすのではなく、「最低限の選択肢」は用意されています。

Prettierとよく混同されるのが ESLint（イーエスリント）です。どちらもコードの品質に関わるツールですが、役割がまったく異なります。

実務では「ESLintでバグを検出しつつ、スタイル系のルールはPrettierに任せる」という 役割分担 が一般的です。両者を同時に使う場合は eslint-config-prettier というパッケージでESLintのスタイルルールを無効化し、競合を防ぎます。

VS Codeでは拡張機能を入れるだけで、ファイルを保存するたびにPrettierが自動で走ります。開発者がわざわざ整形を意識しなくて済む、最も一般的な使い方です。

// .vscode/settings.json の例
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

プルリクエスト時にPrettierのチェックを自動実行し、整形されていないコードのマージを防ぐ使い方もあります。コードレビューで「インデントが違う」などの指摘が不要になります。

# 整形チェックのみ（修正はしない）
npx prettier --check "src/**/*.{js,ts,jsx,tsx}"

# 実際に整形する
npx prettier --write "src/**/*.{js,ts,jsx,tsx}"

プロジェクトのルートに .prettierrc ファイルを置くと、チーム全員が同じルールで整形できます。

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5"
}