Prettier の使い方 — JavaScript/TypeScript対応のコードフォーマッター完全ガイド

一言でいうと

Prettierは、コードを解析して独自のルールで再出力するopinionated（主張のある）コードフォーマッターです。JavaScript、TypeScript、CSS、HTML、JSON、Markdownなど幅広い言語に対応し、チーム全体のコードスタイルを自動で統一します。

どんな時に使う？

• チーム開発でコードスタイルの議論を排除したい時 — インデント幅やセミコロンの有無など、スタイルに関するレビューコメントが不要になります
• 保存時やコミット時に自動フォーマットしたい時 — エディタ連携やpre-commitフックと組み合わせて、常に整形済みのコードを維持できます
• CI/CDでフォーマットチェックを行いたい時 — --check オプションでフォーマット崩れを検知し、PRをブロックできます

インストール

# npm
npm install --save-dev prettier

# yarn
yarn add --dev prettier

# pnpm
pnpm add --save-dev prettier

※ 本記事はPrettier v3.8.1時点の情報です。v3系はESM対応が進んでおり、API利用時に await import が必要になるケースがあります。

基本的な使い方

CLI での実行

# 特定ファイルをフォーマット（上書き）
npx prettier --write src/index.ts

# srcディレクトリ配下を一括フォーマット
npx prettier --write "src/**/*.{ts,tsx,css,json}"

# フォーマットされていないファイルがないかチェック（CI向け）
npx prettier --check "src/**/*.{ts,tsx,css,json}"

設定ファイル

プロジェクトルートに .prettierrc.json（または prettier.config.js など）を配置します。

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "endOfLine": "lf"
}

除外ファイルの指定

.prettierignore をプロジェクトルートに作成します。

node_modules
dist
build
coverage
*.min.js

package.json にスクリプトを追加

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx,css,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,css,json,md}\""
  }
}

よく使うAPI

PrettierはCLIだけでなく、Node.js APIとしてプログラムから呼び出すこともできます。

1. format — 文字列をフォーマットする

最も基本的なAPIです。コード文字列を渡してフォーマット済みの文字列を返します。

import * as prettier from "prettier";

const code = `const   x={a:1,b:2,c:3};export default x;`;

const formatted = await prettier.format(code, {
  parser: "typescript",
  semi: true,
  singleQuote: true,
  trailingComma: "all",
});

console.log(formatted);
// const x = { a: 1, b: 2, c: 3 };
// export default x;

2. check — フォーマット済みかどうかを判定する

CI環境などで「フォーマットが適用されているか」をプログラム的に確認できます。

import * as prettier from "prettier";

const code = `const x = { a: 1, b: 2 };\n`;

const isFormatted = await prettier.check(code, {
  parser: "typescript",
  singleQuote: true,
});

console.log(isFormatted); // true or false

3. resolveConfig — 設定ファイルを読み込む

指定したファイルパスに対応するPrettier設定を解決します。.prettierrc.json や prettier.config.js などを自動で探索します。

import * as prettier from "prettier";

const options = await prettier.resolveConfig("./src/index.ts");
console.log(options);
// { semi: true, singleQuote: true, tabWidth: 2, ... }

// 解決した設定を使ってフォーマット
if (options) {
  const formatted = await prettier.format(code, {
    ...options,
    parser: "typescript",
  });
}

4. getFileInfo — ファイルの対応パーサーを取得する

ファイルパスから、Prettierがどのパーサーを使うか、無視対象かどうかを判定します。

import * as prettier from "prettier";

const fileInfo = await prettier.getFileInfo("./src/App.tsx");
console.log(fileInfo);
// { ignored: false, inferredParser: "typescript" }

const cssInfo = await prettier.getFileInfo("./src/styles.scss");
console.log(cssInfo);
// { ignored: false, inferredParser: "scss" }

5. formatWithCursor — カーソル位置を保持してフォーマットする

エディタプラグインの開発などで、フォーマット後もカーソル位置を正しく維持したい場合に使います。

import * as prettier from "prettier";

const result = await prettier.formatWithCursor(
  `const   x   =   42;`,
  {
    parser: "typescript",
    cursorOffset: 10, // フォーマット前のカーソル位置
  },
);

console.log(result.formatted); // "const x = 42;\n"
console.log(result.cursorOffset); // フォーマット後のカーソル位置

類似パッケージとの比較

補足: ESLintのフォーマットルール（indent, semi 等）は非推奨化が進んでおり、公式でもPrettierとの併用が推奨されています。Biomeは速度面で圧倒的ですが、プラグインエコシステムやHTML/Vue/Angular対応ではPrettierに一日の長があります。

注意点・Tips

ESLintとの競合を防ぐ

PrettierとESLintを併用する場合、スタイル系ルールが競合します。eslint-config-prettier を導入して、ESLint側のフォーマット関連ルールを無効化しましょう。

npm install --save-dev eslint-config-prettier

// eslint.config.js (Flat Config)
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ...他の設定
  eslintConfigPrettier, // 必ず最後に配置
];

pre-commitフックで自動フォーマット

lint-staged + husky の組み合わせが定番です。

npm install --save-dev husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,css,json,md}": "prettier --write"
  }
}

--cache オプションで高速化

大規模プロジェクトでは --cache を付けると、変更のあったファイルのみフォーマットされ大幅に高速化します。

npx prettier --write --cache "src/**/*.{ts,tsx}"

特定箇所のフォーマットを無効化する

意図的にフォーマットを適用したくない箇所には prettier-ignore コメントを使います。

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

/* prettier-ignore */
.complex-selector   { color:   red; }

<!-- prettier-ignore -->
<div   class="intentional-spacing"   >content</div>

v2からv3への移行時の注意

• APIが完全に非同期（async）になりました。format() の戻り値が Promise<string> です
• require("prettier") ではなく import * as prettier from "prettier" を使用してください
• trailingComma のデフォルト値が "all" に変更されました

まとめ

Prettierは「コードスタイルの議論を終わらせる」ための決定版フォーマッターです。設定項目が意図的に少なく抑えられているため、導入コストが低く、チーム全体で一貫したコードスタイルを即座に実現できます。エディタ連携・pre-commitフック・CIチェックの3点セットで運用すれば、コードレビューでスタイルに関する指摘がほぼゼロになるでしょう。