---
title: "Prettierとは？意味・読み方と使い方・設定、ESLintとの違い【3.9対応】"
url: "https://www.issoh.co.jp/tech/details/3354/"
published: 2024-08-20
updated: 2026-10-22
categories: ["JavaScript"]
publisher: "株式会社一創"
---

# Prettierとは？意味・読み方と使い方・設定、ESLintとの違い【3.9対応】

Prettier（読み方：プリティア）は、JavaScriptやTypeScript、CSS、HTMLなどのコードの見た目を自動でそろえるコードフォーマッタです。名前のもとになった英単語 prettier は、形容詞 pretty（きれいな・かわいい）の比較級で「よりきれいな」という意味です。この記事では、辞書的な意味とツールとしてのPrettierを切り分けたうえで、2026年10月時点の最新版 Prettier 3.9.10 を実際にインストールして確かめた整形結果・設定・ESLintとの併用・対応言語を説明します。

## まとめ：Prettierの意味と使い方の要点

- **意味と読み方**：英単語 prettier は pretty の比較級で「よりきれいな」。ツール名のPrettierもこの語から来ており、読み方はどちらも「プリティア」です。
- **何をするツールか**：インデント・改行・クォート・セミコロンなどの見た目を、決まった規則で書き直すフォーマッタです。バグを見つける機能はありません。
- **最新版**：安定版は3.9.10（2026年10月10日公開）。4.0はまだalpha版です。
- **使い方**：`npm install --save-dev --save-exact prettier` で入れ、`npx prettier --write .` で整形、CIでは `--check`（未整形があれば終了コード1）で検査します。
- **ESLintとの関係**：整形はPrettier、品質検査はESLintに分け、`eslint-config-prettier` でESLint側の整形ルールを止めて併用します。
- **対応言語**：本体が扱うのは23言語。Python・PHP・Javaは本体では整形できず、PHPとJavaはプラグイン、PythonはRuffやBlackを使います。

以下、各項目を実測結果とあわせて説明します。

## 「prettier」の意味と読み方：英単語とツール名の違い

「prettier 意味」で検索すると、英和辞書のページとコード整形ツールの解説ページが混ざって出てきます。つづりは同じでも指しているものが違うので、先に切り分けます。

| 項目    | 英単語 prettier             | ツール Prettier          |
| ----- | ------------------------ | --------------------- |
| 品詞・種類 | 形容詞 pretty の比較級          | 固有名詞（ソフトウェア名）         |
| 意味    | よりきれいな・よりかわいい            | コードフォーマッタ             |
| 読み方   | プリティア                    | プリティア                 |
| 使用例   | She is prettier than me. | npx prettier –write . |

英単語としての意味は辞書で確認できます。[Cambridge Dictionaryの「pretty」の項](https://dictionary.cambridge.org/dictionary/english/pretty)は形容詞の意味を「見て心地よい、または（特に女性や女性に関わるものが）繊細な感じで魅力的な」と説明し、例文に「My older sister is prettier than I am.」を挙げています（prettier で引くと pretty の項に転送されます）。pretty の発音は同辞書の英国式で /ˈprɪt.i/ で、比較級 prettier をカタカナにすると「プリティア」に近くなります。

ツールのPrettierは「コードをよりきれいにする」という意味を込めた名前です。検索では pretter・pretier のようなつづり間違いも多いのですが、npmのパッケージ名は `prettier`（tが2つ・iが2つ）です。つづりを間違えると、pretier では誤入力対策の空パッケージ（0.0.1）が入り、pretter は存在しないためエラーになるので、コマンドはコピーして使ってください。

## Prettierとは：コードフォーマッタの役割と「オピニオン型」の考え方

コードフォーマッタは、コードの意味を変えずに見た目だけを決まった形へ書き直すツールです。Prettierは一度コードを構文木に分解し、元の改行や空白をほぼ捨ててから、自分の規則で書き出し直します。そのため、書き方の癖が違っても、同じ意味のコードはほぼ同じ形にそろいます（例外はオブジェクトの改行と空行です）。

Prettierは公式サイトで「Opinionated Code Formatter（オピニオン型のコードフォーマッタ）」を名乗っています。インデントの幅やクォートの種類といった見た目の選択肢を作者側で決めておき、利用者が細かく議論しなくて済むようにする考え方です。[公式の Option Philosophy](https://prettier.io/docs/option-philosophy) は採用の最大の理由を「スタイルをめぐる議論を終わらせること」と書き、さらに**新しいオプションの要望はもう受け付けない**と明言しています。設定できる項目は今後も増えない前提で選ぶツールです。

公開は2017年1月（npmの最初の版 0.0.1 は2017年1月10日）で、ライセンスはMITです。

## Prettierをインストールして整形する手順（3.9.10で実測）

以下は、2026年10月22日に Node.js v26.5.0・npm 11.17.0 の環境で Prettier 3.9.10 を入れて実行した結果です。

### npmでのPrettierのインストールと版固定

[公式のインストール手順](https://prettier.io/docs/install)は、プロジェクトの開発依存として、版を固定して入れるよう案内しています。パッチ版の違いでも整形結果がわずかに変わることがあり、メンバーごとに版が違うと互いの変更を書き戻し合うためです。

```
npm install --save-dev --save-exact prettier
npx prettier --version   # 3.9.10
```

yarnなら `yarn add --dev --exact prettier`、pnpmなら `pnpm add --save-dev --save-exact prettier` です。

### 整形前と整形後のコード

次のコードを用意し、`npx prettier src/sample.js` で整形結果を出力しました。

```
const user = {name:'Taro',age:20}
function greet(name){return 'Hello, '+name}
fetchData(url).then(res=>res.json()).then(data=>console.log(data)).catch(err=>console.error(err))
```

Prettier 3.9.10 の出力は次のとおりです。

```
const user = { name: "Taro", age: 20 };
function greet(name) {
  return "Hello, " + name;
}
fetchData(url)
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));
```

シングルクォートがダブルクォートに、文末にセミコロンが付き、アロー関数の引数に括弧が付き、メソッドチェーンが1行1呼び出しに分かれました。クォート・セミコロン・括弧は既定値（`singleQuote: false`・`semi: true`・`arrowParens: "always"`）どおりの動きです。チェーンの分割は文字数によるものではなく、呼び出しが3つ以上で引数に関数を含むチェーンを縦に並べる規則によるもので、`--print-width 200` にしても同じ形になりました。ファイルを書き換えるときは `--write` を付けます。

```
npx prettier --write .                 # カレント配下の対応ファイルをすべて整形
npx prettier --write "src/**/*.{js,ts}"  # 対象を絞る（グロブは引用符で囲む）
```

`node_modules` と `.git` などは既定で対象外で、Prettierを実行したディレクトリに `.gitignore` があれば、そこに書いたパスも無視されます。それ以外に除外したいものは `.prettierignore` に `.gitignore` と同じ書き方で列挙します。

### –checkと終了コードによるCIへの組み込み

CIではファイルを書き換えず、整形済みかどうかだけを検査します。[公式のCLIドキュメント](https://prettier.io/docs/cli)によると、終了コードは0（すべて整形済み）・1（未整形のファイルがある）・2（Prettier自体のエラー）の3種類です。実際に未整形の `sample.js` を検査すると、次のように終了コード1で止まりました。

```
$ npx prettier --check src/sample.js
Checking formatting...
[warn] src/sample.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.
$ echo $?
1
```

`package.json` にスクリプトを登録しておくと、全員とCIが同じコマンドを使えます。

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

ファイル数が多いリポジトリでは、前回から変わっていないファイルを飛ばす `--cache` も使えます。キャッシュは `node_modules/.cache/prettier/` に保存されます。

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

エディタで使うなら、VS Codeの拡張機能 [Prettier – Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)（ID：`esbenp.prettier-vscode`）を入れます。2026年10月時点の版は12.4.0（2026年3月16日更新）で、インストール数は約7,246万です。入れたら、プロジェクトの `.vscode/settings.json` に次の2行を書きます。

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

拡張は、プロジェクトの `node_modules` にPrettierがあればその版を使い、なければ拡張に同梱された版（12.4.0の同梱は3.7.4で、最新の3.9.10とは違います）を使います。チームで版をそろえるには、拡張だけに頼らずプロジェクトにも入れておく必要があります。

保存しても整形されないときは、次の順に確認すると原因にたどり着けます。

- `editor.defaultFormatter` が未指定で、別の整形拡張が使われている（言語別の設定 `[javascript]` などで上書きされていないかも見る）
- フォルダを「信頼しない」で開いている。[拡張のREADME](https://github.com/prettier/prettier-vscode)によると、制限モードでは同梱版だけが動き、プロジェクトのPrettierやプラグインは読み込まれません
- 設定ファイルの読み込みに失敗している（次の章の `prettier.config.ts` の例）。VS Codeの「出力」パネルで「Prettier」を選ぶとエラーが見えます
- 対象ファイルが `.prettierignore` に含まれている

## .prettierrcの書き方とオプションの既定値

設定は、プロジェクトのルートに置いた `.prettierrc`（JSONかYAML）に、既定から変えたい項目だけを書きます。例えばセミコロンを省いてシングルクォートにするなら次の1行です。

```
{ "semi": false, "singleQuote": true }
```

主なオプションの既定値は、`npx prettier --support-info` で3.9.10から取り出した値です。

| オプション           | 既定値          | 変えると                        |
| --------------- | ------------ | --------------------------- |
| `printWidth`    | 80           | 折り返しの目安の文字数                 |
| `tabWidth`      | 2            | インデントの空白数                   |
| `useTabs`       | false        | true でタブインデント               |
| `semi`          | true         | false で文末のセミコロンを省く          |
| `singleQuote`   | false        | true でシングルクォート              |
| `trailingComma` | `"all"`      | `"es5"`・`"none"` で末尾カンマを減らす |
| `arrowParens`   | `"always"`   | `"avoid"` で引数1つの括弧を省く       |
| `objectWrap`    | `"preserve"` | `"collapse"` でオブジェクトを1行に畳む  |
| `endOfLine`     | `"lf"`       | `"crlf"`・`"auto"` など        |

`trailingComma` の既定は3.0で `"es5"` から `"all"` に変わったので、3.0（2023年7月5日）より前の記事の既定値は古いことがあります。全項目は[公式の Options](https://prettier.io/docs/options) にあります。セミコロンを省く設定は好みが割れるので、決める前に[TypeScriptのセミコロンは必要か｜省略の判断とESLint・Prettier設定【2026年版】](/tech/details/5572/)で利点と落とし穴を確認してください。

`.editorconfig` があれば、Prettierはそれも読んで設定に変換します。実際に `[*]` と `indent_style = tab` の2行だけを書いた `.editorconfig` を置くと、`.prettierrc` が無くてもタブでインデントされました（`[*]` のようなセクション見出しが無いと効きません）。`.prettierrc` と食い違う項目は `.prettierrc` が優先されます。

TypeScriptで `prettier.config.ts` を書くときは、`package.json` の `type` に注意が必要です。`npm init -y`（npm 11）で作った `package.json` は `"type": "commonjs"` になり、その状態で `export default` を書いた `prettier.config.ts` を置くと`Unexpected token 'export'` で設定の読み込みに失敗しました。拡張子を `prettier.config.mts` にするか、`"type": "module"` にすると読み込めます。[公式の Configuration](https://prettier.io/docs/configuration) にも、`.ts` の扱いは `type` の値で決まり、Node.js 22.6.0以上が必要で、24.3.0より前では `--experimental-strip-types` も要ると書かれています。

## Prettierで改行が勝手に変わる規則と止め方

Prettierへの不満で多いのが「わざと入れた改行を消される」というものです。検索上位の[「Prettierを使わない理由」（Zenn）](https://zenn.dev/praha/articles/7ed629d0d9da53)も、差分を見やすくするために縦に並べた配列や引数が1行に戻される点を理由に挙げています。どこまで元の改行が保たれるのかは、3.9.10で次のように確かめられました。

```
// 整形前
const arr = [
  "element1",
  "element2",
];
const obj = {
  a: 1, b: 2 };
const o2 = { a: 1,
  b: 2 };

// 整形後
const arr = ["element1", "element2"];
const obj = {
  a: 1,
  b: 2,
};
const o2 = { a: 1, b: 2 };
```

- **配列・関数の引数**は、80文字に収まれば1行に畳まれます。元の改行は覚えていません。ただし要素がすべてオブジェクトの配列や配列の配列（`[{ a: 1, b: 2 }, { c: 3, d: 4 }]` など）は、収まっていても1要素1行に分かれます。
- **メソッドチェーン**は、呼び出しが3つ以上で引数に関数などを含むと、80文字に収まっていても1行1呼び出しに分かれます（`z.then((x) => x).then((y) => y).then((w) => w)` は50文字でも分割）。`func().a().b().c()` のように引数が単純なら1行に畳まれます。
- **オブジェクト**だけは例外で、`{` と最初のキーの間に改行があれば複数行のまま残ります（`obj`）。最初のキーが `{` と同じ行にあると畳まれます（`o2`）。[公式の Rationale](https://prettier.io/docs/rationale) は、オブジェクトは用途が幅広く複数行のままの方が読みやすい場合があるが、それを見分けるよい規則が見つからなかったため、とこの例外の理由を説明しています。
- この例外が要らなければ、3.5.0で入った `"objectWrap": "collapse"` で、収まるオブジェクトも1行に畳めます。

行列のように並びそのものに意味がある箇所は、直前に `// prettier-ignore` と書くと、次の1文だけ整形の対象から外せます。

```
// prettier-ignore
const matrix = [
  1, 0,
  0, 1,
];
```

なお `[[1, 0], [0, 1]]` のように行を配列で分けて書けば、配列の配列は自動で1行1要素に分かれるので、ignore なしでも並びを保てます。`prettier-ignore` を付けるかどうかは書く人次第なので、多用するとPrettierを入れた意味である「誰が書いても同じ形」が崩れます。使う場面は行列や表形式のデータに限る、とチームで決めておくのが現実的です。

## PrettierとESLintの違いと併用の設定

Prettierとよく比べられるのがリンターのESLintです。担当が違うので、どちらか一方を選ぶものではありません。

| 観点   | Prettier        | ESLint            |
| ---- | --------------- | ----------------- |
| 種類   | フォーマッタ          | リンター              |
| 見るもの | 見た目（改行・空白・クォート） | 未使用変数・未定義の参照などの誤り |
| 直し方  | ファイル全体を書き直す     | ルール違反を報告し、一部を自動修正 |
| 設定の量 | 少ない（オプションは凍結）   | ルールごとに選ぶ          |

両方を入れると、ESLintに残っている整形系のルール（`indent`・`quotes` など。8.53.0で非推奨になり11.0.0で削除予定）とPrettierの出力がぶつかります。これを避けるのが [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)（2026年10月時点で10.1.8）で、整形系のルールをまとめて無効にします。ESLint 10のflat configでは、設定配列の最後に置きます。

```
// eslint.config.mjs
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  js.configs.recommended,
  { rules: { indent: ["error", 4], quotes: ["error", "single"] } }, // 実測で足した整形系ルール
  eslintConfigPrettier, // 最後に置き、前の設定の整形ルールを打ち消す
];
```

ESLint 10.13.0で、整形前のサンプル（上のコードに配列やオブジェクトを足した14行）を、`indent`・`quotes` ルールを足した設定で検査すると、`eslint-config-prettier` なしでは20件（うち整形系のエラー10件）が報告され、最後に足すと整形系の10件が消えて、未定義の変数などの10件だけが残りました。整形の指摘をESLintから追い出し、ESLintは誤りの検出に専念させる、というのがこの設定の意味です。

似た名前の `eslint-plugin-prettier` は、PrettierをESLintのルールとして実行するものです。[公式の Integrating with Linters](https://prettier.io/docs/integrating-with-linters) は、エディタに赤い波線が大量に出ること、Prettierを直接実行するより遅いこと、間に1層挟む分だけ壊れる箇所が増えることを挙げ、こうした関連ツールを「一般には推奨しない」としています。Prettierは単体で実行し、ESLintとは別のコマンドにしてください。flat configの書き方とVS Codeでの保存時修正は[ESLintをVSCodeで使う設定手順｜ESLint 10のflat configと保存時の自動修正【10.13対応】](/tech/details/3286/)で詳しく扱っています。

## Prettierの対応言語とプラグイン（Python・PHP・Java）

`npx prettier --support-info` で3.9.10が本体で扱える言語を数えると23ありました。JavaScript・TypeScript・JSX・TSX・Flow・JSON（JSON5・コメント付きJSONなど4種）・CSS・SCSS・Less・PostCSS・HTML・Vue・Angular・Handlebars・Lightning Web Components・MJML・Markdown・MDX・YAML・GraphQLです。フロントエンドで触るファイルはほぼ揃っています。

3.9.0（2026年6月27日）では[リリースノート](https://prettier.io/blog/2026/06/27/3.9.0)のとおりMarkdownのパーサーがmicromark v4に替わり、全角スペース（U+3000）の扱いなど和文まわりの修正も入りました。日本語のMarkdownを整形するなら3.9以上を使ってください。

反対に、**Python・PHP・Java・Rubyは本体では整形できません**。`.py` を直接指定すると、パーサーを推定できず終了コード2で止まりました。

```
$ npx prettier src/a.py
[error] No parser could be inferred for file "/private/tmp/w3354/lab/src/a.py".
$ echo $?
2
```

一方、`npx prettier --check src` のようにディレクトリを渡すと、`.py` は何の表示もなく対象から外れます。「Prettierを通したからPythonも整っているはず」と思い込まないよう注意が必要です。

他の言語は[プラグイン](https://prettier.io/docs/plugins)で追加します。公式ドキュメントは、PrettierのGitHub組織で公開されている「Official Plugins」とそれ以外の「Community Plugins」を分けて載せています。

| 言語     | 手段                    | 区分      | npmの版（2026年10月）                |
| ------ | --------------------- | ------- | ------------------------------ |
| PHP    | @prettier/plugin-php  | 公式プラグイン | 0.26.0                         |
| Ruby   | @prettier/plugin-ruby | 公式プラグイン | 4.0.4（2023年12月以降更新なし）          |
| XML    | @prettier/plugin-xml  | 公式プラグイン | 3.4.2                          |
| Java   | prettier-plugin-java  | コミュニティ  | 2.11.0                         |
| Python | なし（Ruff・Black）        | 対象外     | @prettier/plugin-python は正式版なし |

PHPとJavaのプラグインを入れて `--plugin` で読み込むと、3.9.10でも整形できました。ただ、PHPならLaravel標準の[Laravel Pint](/tech/details/17143/)、Pythonなら[PEP8に沿ってRuffで整形する構成](/tech/details/3032/)のように、その言語の定番ツールの方が流儀に合います。Prettierはフロントエンドのファイルに絞るのが無理のない分担です。

## Prettierを使わない方がよいケースと代替ツール（Biome・Oxfmt）

次の条件に当てはまるなら、Prettierを入れる前に考え直してください。

- **改行やインデントの規約をチームで細かく決めている**：オプションは凍結されているので、Prettierの形に合わせるしかありません。合わせられないなら、ESLint Stylistic（`@stylistic/eslint-plugin`）の整形ルールで自前の規約を維持する方が早く済みます。
- **長く運用している大きなリポジトリにあとから入れる**：最初の `--write` でほぼ全ファイルに差分が出て、`git blame` の履歴が整形コミットで埋まります。入れるなら、整形だけのコミットを1つに分け、そのハッシュを `.git-blame-ignore-revs` に書いて `git config blame.ignoreRevsFile .git-blame-ignore-revs` を設定すると、`git blame` が整形コミットを飛ばします。
- **整形の速さが問題になっている**：PrettierはJavaScriptで動くので、Rust製のツールより遅くなります。

速さが問題なら、Prettierとほぼ同じ出力を目指すRust製のフォーマッタがあります。ESLint 10.13.0の `lib` ディレクトリ（JavaScript 389ファイルと型定義など6ファイルの計395ファイル・約3.1MB）を、同じマシン（Intel Core i9-9880H）でそれぞれ整形した時間は次のとおりでした。npx経由の起動時間を含みます。

| ツール                         | 版      | 395ファイルの整形 | sample.jsの出力    |
| --------------------------- | ------ | ---------- | --------------- |
| Prettier                    | 3.9.10 | 約12.5秒     | 基準              |
| Prettier（–experimental-cli） | 3.9.10 | 約10.4秒     | 同じ              |
| Biome                       | 2.6.2  | 約2.0秒      | インデントがタブ（既定の違い） |
| Oxfmt                       | 0.74.0 | 約1.7秒      | 完全に一致           |

BiomeはリンターとフォーマッタをまとめたツールでESLintの代わりにも使えます（ESLintのプラグインやカスタムルールはそのまま移せません）が、既定のインデントがタブなので、Prettierと同じ見た目にするには `indentStyle` を `"space"` にします。移行の手順は[Biome v2とは？最新2.5系の導入・biome.json設定とESLint/Prettier移行](/tech/details/7390/)にまとめています。OxfmtはOxcプロジェクトのフォーマッタで、今回の短いサンプルではPrettierと1文字も違わない出力でしたが、版はまだ0系です。Oxcの全体像は[Oxcとは？Rust製JavaScriptツールチェーンの構成と使い方・SWCとの違い](/tech/details/9737/)、同じプロジェクトのリンターは[OxlintとESLintの違いとは？読み方・速度実測・移行手順とBiomeとの比較【1.88対応】](/tech/details/8351/)を参照してください。

判断としては、プラグインが必要な言語（Svelte・Astro・PHPなど）を扱う、またはエディタ連携の安定を優先するならPrettierのままにします。JavaScript・TypeScript・CSSだけで、CIの整形チェックに10秒以上かかっているなら、BiomeかOxfmtへの切り替えを検討する価値があります。

## よくある質問

### Prettierの読み方は何ですか？

「プリティア」と読みます。英単語 pretty（きれいな）の比較級 prettier（よりきれいな）がそのまま名前になっています。pretter や pretier はつづり間違いで、npmのパッケージ名は `prettier` です。

### Prettierは無料で使えますか？

無料です。MITライセンスのオープンソースで、個人・商用を問わず費用はかかりません。

### PrettierはPythonのコードを整形できますか？

できません。本体はPythonに対応しておらず、`@prettier/plugin-python` も正式版が出ていません。PythonはRuffの `ruff format` かBlackで整形します。

### Prettier 4はリリースされていますか？

2026年10月時点ではalpha版です。npmの `next` タグは 4.0.0-alpha.13（2025年11月18日公開）で、`latest` は3.9.10です。業務では3系を版固定で使い、4.0は正式版が出てから切り替えるのが安全です。

### PrettierとESLintはどちらを使えばよいですか？

両方使います。整形はPrettier、誤りの検出はESLintに任せ、`eslint-config-prettier` で衝突を避けます。1つのツールにまとめたいならBiomeが選択肢です。

## 関連記事

- [ESLintをVSCodeで使う設定手順｜ESLint 10のflat configと保存時の自動修正【10.13対応】](/tech/details/3286/)
- [Biome v2とは？最新2.5系の導入・biome.json設定とESLint/Prettier移行](/tech/details/7390/)
- [OxlintとESLintの違いとは？読み方・速度実測・移行手順とBiomeとの比較【1.88対応】](/tech/details/8351/)
- [TypeScriptのセミコロンは必要か｜省略の判断とESLint・Prettier設定【2026年版】](/tech/details/5572/)
- [Stylelintとは？v17の変更点・導入手順・設定とCSSネスト対応【17.16対応】](/tech/details/10686/)

---

出典: [Prettierとは？意味・読み方と使い方・設定、ESLintとの違い【3.9対応】](<https://www.issoh.co.jp/tech/details/3354/>)（株式会社一創）