ESLintとPrettierの違いと共存設定方法

開発ツール

JavaScript / TypeScriptプロジェクトで定番のツールとして、ESLintとPrettierがあります。両者は似て非なる役割で、組み合わせて使うのが基本です。本記事では、ESLintとPrettierの違いと共存設定方法を解説します。

役割の違い

  • ESLint：コードの品質チェック（バグ・不適切な書き方の検出）
  • Prettier：コードフォーマット（見た目の整形）

「未使用変数を警告する」のはESLint、「インデントやセミコロンを整える」のはPrettierの仕事です。

セットアップ

# インストール
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \
        prettier eslint-config-prettier

共存のポイント

競合を避けるため、フォーマット系のESLintルールは無効化します。eslint-config-prettierを入れて、設定の最後に展開します。

// eslint.config.js（Flat Config）
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  ...tseslint.configs.recommended,
  prettier, // フォーマット系のルールを上書きでoff
];

Prettier設定

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "all"
}

運用フロー

  • 保存時にPrettierで自動整形（VS Code設定 + Prettier拡張）
  • コミット前にESLintを実行（lint-staged + husky）
  • CIでlintとformat checkを必須化

scripts例

// package.json
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write .",
  "format:check": "prettier --check ."
}

近年の選択肢：Biome

ESLint + Prettierの代替としてBiomeが注目されています。Rust製で爆速・設定一元化・ゼロセットアップが特徴。新規プロジェクトで「ESLint+Prettier or Biome」の比較検討が増えています。

まとめ

ESLintは品質、Prettierは見た目。役割の異なる2つを共存させ、保存時整形 + コミット前lint + CIチェックのワークフローを組めば、コード品質と一貫性が保たれます。新規プロジェクトではBiomeも検討に値します。