自動化

Prettierとは?意味・読み方からコマンド・設定・ESLintとの違いまで

「prettier」を英語の辞書で引くと、形容詞 pretty(かわいい・きれい)の比較級、つまり「より美しい」という意味です。一方、開発の現場で「Prettier」と言えば、書いたコードのインデントや改行を自動でそろえるツールを指します。読み方はプリティア。ツール名は「コードをより美しく整える」という pretty のもじりです。この記事では、辞書的な意味と読み方を整理したうえで、ツールとしてのPrettierを、導入コマンド・.prettierrc設定・ESLintとの違い・対応言語まで一気に確認します。

まとめ:Prettierの要点

  • Prettier(プリティア)は、設定をほとんど書かなくても一貫した整形を行う「オピニオン型」のコードフォーマッタ。2017年にJames Longが公開し、2026年時点は3系です。
  • 名前の由来は英単語 pretty(きれい)の比較級 prettier。「コードをより美しくする」という語呂合わせです。
  • 導入は npm install --save-dev prettier でインストールし、npx prettier --write . で整形します。
  • 整形はPrettier、バグやアンチパターンの検出はESLintと役割を分け、併用するのが定番です。
  • 設定は .prettierrc に必要な項目だけ書きます。printWidthtabWidthsemisingleQuote あたりで十分です。
  • Pythonは公式に対応していません。Python整形にはBlackやRuffを使います(誤解が多い点です)。

以下で、意味・読み方から順に掘り下げます。

「Prettier」の意味・読み方と名前の由来

検索で「prettier 意味」と調べると、上位には英和辞書(pretty の比較級を説明するページ)と、コード整形ツールの解説が混在します。同じつづりで別物なので、まずここを切り分けます。英単語としての prettier は「より美しい・よりかわいい」で、pretty の比較級です。開発ツールとしてのPrettierは、この単語をもじって「コードをより美しく整える」ことを狙った固有名詞です。読み方はどちらもプリティアで、priteer や pretier とつづりを間違えやすい語でもあります。

ツールのPrettierは「opinionated(オピニオン型)」を掲げています。これは、インデントは何スペースか、クォートはシングルかダブルかといった見た目の選択肢をあえて絞り、利用者が細かく悩まなくても同じ結果になるようにする設計思想です。裏を返すと、整形ルールをチーム独自に細かく決めたい場合には向きません。Prettierは選べる項目を意図的に減らしているため、「自社独自の整形規約を1行単位で作り込みたい」というチームでは、かえって窮屈に感じる場面があります。

Prettierが自動整形で解決する開発現場の課題

Prettierが引き受けるのは「コードの見た目をそろえる」一点です。複数人で開発すると、改行位置やスペースの入れ方が人によって違い、レビューで本質と関係ないスタイルの指摘が増えます。Prettierを通せば全員のコードが同じ形に整うため、レビューはロジックの確認に集中できます。

ここでよく混同されるのがLinter(リンター)との違いです。LinterのESLintは、未使用変数や到達しないコードといった「品質・バグの芽」を検出するツールで、コードの意味に踏み込みます。Prettierは意味には触れず整形だけを担当します。役割が別なので、実務では両方を入れて使い分けます(違いと併用は後述します)。

Prettierのインストールと実行コマンド

npm・yarnでのインストールとCLI実行

PrettierはNode.js環境で動きます。プロジェクトのルートで開発依存として入れるのが基本です。npmなら次のコマンド、yarnなら yarn add --dev prettier です。

npm install --save-dev prettier

整形はカレント配下をまとめて書き換える npx prettier --write . が起点です。特定の種類だけ対象にするなら npx prettier --write "src/**/*.{js,ts}" のようにグロブを渡します。CIでは書き換えず差分だけ見たいので、整形済みかを検査する --check を使います。

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

package.json にスクリプトを登録しておけば、npm run formatnpm run format:check で全員が同じコマンドを叩けます。

VS Codeで保存時に自動整形する設定

手元で最も使うのはエディタ連携です。VS Codeなら拡張機能 esbenp.prettier-vscode を入れ、設定で保存時整形を有効にします。

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

これでファイルを保存するたびに整形が走ります。既定フォーマッタを指定しておかないと、複数の整形拡張が競合してどちらが効くか不安定になるため、editor.defaultFormatter の明示が実務上の要点です。

.prettierrcで変えられる主な設定

設定はプロジェクトルートの .prettierrc(JSONやYAML)に、既定から変えたい項目だけ書きます。主なオプションと既定値は次のとおりです。

オプション 既定値 内容
printWidth 80 折り返しの目安幅
tabWidth 2 インデントの空白数
semi true 文末セミコロンの付与
singleQuote false 文字列をシングルクォートに
trailingComma all 末尾カンマ(v3.0で既定がallに変更)

整形対象から外したいファイルは .prettierignore に書きます(記法は .gitignore と同じ)。semifalse にしてセミコロンを省く「No-Semi」スタイルは好みが割れる設定で、採用前に利点と落とし穴を押さえておくと安全です。詳しくはNo-Semiスタイルのメリットとデメリットを徹底解説で扱っています。

PrettierとESLintの違いと併用(役割分担)

両者は競合するツールではなく、担当が違います。整形はPrettier、コードの品質検査はESLintです。

観点 Prettier ESLint
目的 見た目の整形 バグ・アンチパターン検出
踏み込む範囲 スタイルのみ コードの意味・論理
設定量 少ない(オピニオン型) ルールごとに設定

両方を入れると、ESLintが持つ整形系ルールとPrettierの整形が衝突することがあります。これを避けるのが eslint-config-prettier で、ESLintの整形系ルールを無効化してPrettierに整形を任せます。ESLint v9以降のフラットコンフィグ(eslint.config.js)では、この設定を配列の最後に置くのが定石です。設定手順はESLintとは?VSCodeでの設定からflat config・Prettier連携まで解説【ESLint v10対応】にまとめています。なお、Rust製で高速なOxlintや、その基盤であるOxcのように、LinterとFormatterを1つのツールでまかなう新しい選択肢も出てきています。

Prettierの対応言語と拡張プラグイン

Prettierが標準で整形できるのは、JavaScript・TypeScript・JSX・CSS・SCSS・Less・HTML・Vue・JSON・YAML・Markdown・GraphQL などです。フロントエンドで扱うファイルはおおむねカバーします。

ここで誤解が多いのがバックエンド言語です。PrettierはPythonを公式に対応していません。実験的な @prettier/plugin-python は過去に公開されましたが開発は停止済みで、公式ドキュメントはPython整形にBlackを使うよう案内しています。より高速な代替として、Black互換のまま数十倍速い(Rust実装の)Ruffも定番です。PHPやJavaも本体には含まれず、@prettier/plugin-phpprettier-plugin-java といったコミュニティ製プラグインを追加して初めて動きます。「Prettierですべてのバックエンドをそろえられる」と考えると設定が崩れるので、Prettierはフロントエンド中心、Pythonは別ツール、と切り分けるのが実務での判断です。

よくある質問

Prettierの読み方は何ですか?

プリティアと読みます。英単語 pretty(きれい・かわいい)の比較級 prettier(より美しい)が由来で、「コードをより美しく整える」という語呂合わせでこの名前が付いています。priteer や pretier とつづりを間違えやすいので、npmでインストールする際は綴りに注意してください。

Prettierは無料で使えますか?

無料です。PrettierはMITライセンスで公開されているオープンソースソフトウェアで、個人・商用を問わず無償で利用できます。npmから誰でもインストールでき、ライセンス費用や利用登録は不要です。

PrettierとESLintはどちらを使えばいいですか?

どちらか一方ではなく、併用が基本です。コードの見た目をそろえる整形はPrettier、未使用変数やバグの芽を見つける品質検査はESLintが担当します。両者の整形ルールが衝突しないよう、eslint-config-prettier を入れてESLint側の整形系ルールを無効化して組み合わせます。

PrettierはPythonに対応していますか?

公式には対応していません。実験的なコミュニティプラグインはありますが、本番運用には推奨されていません。Pythonのコード整形にはBlack、またはBlack互換で高速なRuffを使うのが標準です。PrettierはJavaScript/TypeScript系を中心に使い、Pythonは別ツールに任せる構成が安定します。

インデント幅やクォートは変更できますか?

変更できます。プロジェクトルートに .prettierrc を置き、tabWidth でインデント幅、singleQuote でクォートの種類、semi でセミコロンの有無などを指定します。既定でも実用十分なので、チームで合意した項目だけ最小限に書き換えるのがおすすめです。

関連記事

資料請求

RELATED POSTS 関連記事