Prettierとは？意見の強いコードフォーマッターを解説

Prettierは意見の強い（opinionated）コードformatterであり、コードを一貫したスタイルで自動的に再出力することで、フォーマットに関する議論を終わらせます。

Prettierは、どのように書かれたかに関係なく、コードを単一の一貫したスタイルに再フォーマットします。フォーマットの決定を人間の手から取り除くことで、code reviewでのスタイル論争をなくし、コードベース全体を統一された見た目に保ちます。

Prettierとは何か

Prettierは、JavaScript、TypeScript、CSS、HTML、JSON、Markdownなどをサポートするコードformatterです。コードをASTにパースし、独自のルールを使ってゼロから再出力するため、元のスペースや改行は関係ありません。設計上、設定オプションはほとんどありません。

linterとの違い

ESLintのようなlinterは問題を見つけ、いくつかのスタイル上のルールを強制できますが、formatterはレイアウトを書き換えるだけです。この2つは補完的です。Prettierはフォーマットを担い、ESLintはコード品質のルールを担います。"eslint-config-prettier"のようなconfigはESLintのスタイル上のルールを無効にし、2つのツールが競合しないようにします。

使用例

CIでフォーマットをチェックするか、ローカルで書き込みます。

# fail if any file is not formatted (use in CI)
npx prettier --check .

# rewrite files to the canonical format
npx prettier --write .

CI/CDでの役割

CIでは、"prettier --check"がすべてのファイルが正規のフォーマットに一致するか検証し、一致しない場合は非ゼロで終了して、フォーマットされていないコードでbuildを失敗させます。これによりリポジトリ全体が一貫した状態に保たれ、diffがクリーンに保たれます。多くのチームはPrettierをpre-commit hookでも実行し、CIがほとんど何も検出しないようにしています。

代替手段

Biomeには、PrettierとESLintをまとめて置き換えることを目指す、高速なRustベースのformatterが含まれています。dprintはもう1つの高速でプラグイン可能なformatterです。言語固有のformatter（gofmt、rustfmt、Python向けのBlack）は、それぞれのエコシステムで同じ役割を果たします。PrettierはJavaScriptの世界のデフォルトであり続けています。

重要なポイント

• Prettierはコードを単一の一貫した意見の強いスタイルで再出力します。
• フォーマットはPrettierが担い、コード品質のルールはESLintが担います。
• CIで"prettier --check"を使い、フォーマットされていないコードでbuildを失敗させましょう。

関連ガイド