.eslintrc と .prettierrc、eslint-config-* と eslint-plugin-*、そして「ESLint と Prettier のルールが喧嘩する」問題。

フロントエンドのリント環境は、いつの間にか設定ファイルとnpmパッケージの沼になっていませんか。2026年のトレンドは、その全部を1つに畳む Rust 製ツール Biome です。

Biome はリンター＋フォーマッター＋import整列を1つのバイナリ・1つの設定ファイル（biome.json）で完結させます。しかも速い。

公式が掲げるベンチではフォーマットが Prettier の約35倍、リントも ESLint と比べて桁違いです。この記事では、既存プロジェクトを3コマンド・約10分で移行する手順を、コピペで使える設定つきで一気に解説します。

独学に限界を感じたら

プログラミング教室がおすすめ。挫折せず最短で実力を伸ばせます。

PR

Biomeとは？なぜ今ESLint+Prettierから乗り換えるのか

Biome は Rust で書かれた Web 向けツールチェインです。

従来「ESLint（静的解析）＋Prettier（整形）＋eslint-plugin-import（import順）」と3役に分かれていた仕事を、依存パッケージ1つ・設定ファイル1つで肩代わりします。

2026年時点の v2 系では500以上のリントルールを搭載し、ESLint / typescript-eslint 由来のルールを幅広くカバーしています。

  • 依存は @biomejs/biome の1つだけ。config・plugin地獄から解放される
  • 設定は biome.json の1ファイル。formatter / linter / import整列を一元管理
  • Rust製で高速。数千〜数万ファイルでも一瞬で終わる
  • TypeScriptコンパイラなしで動く「型を意識したルール」をv2で搭載
  • JS / TS / JSX / TSX / JSON / CSS / GraphQL に対応（Vue・Svelte は実験的サポート）

特に大きいのが、v2 で入った型を意識したリント（type-aware lint）です。

noFloatingPromises（await 忘れの検知）のようなルールが、TypeScript本体をインストールしなくてもBiome独自の型推論で動きます。

従来 typescript-eslint が担っていた領域に、単体ツールで踏み込み始めたのが v2 の目玉です。

10分で終わる移行：たった3コマンド

移行の主役は biome migrate です。既存の .eslintrc / .prettierrc を読み取り、対応するルールを biome.json に自動変換してくれます。ゼロから設定し直す必要はありません。

# 1. Biome を追加（バージョン固定を推奨）
npm install --save-dev --save-exact @biomejs/biome

# 2. biome.json を生成（$schema は最新版に合わせて自動で書かれる）
npx @biomejs/biome init

# 3. 既存の ESLint / Prettier 設定を Biome へ変換
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

あとは変換後の設定でプロジェクト全体をチェック＆自動修正するだけ。check は「リント＋フォーマット＋import整列」をまとめて実行するオールインワンのコマンドです。

# 問題を検出して、自動修正できるものは一括で直す
npx @biomejs/biome check --write .

問題なく通ったら、不要になった eslint / prettier 系のパッケージと設定ファイルを削除します。package.json の devDependencies から eslint* と prettier* が丸ごと消えるのは、なかなか爽快です。

コピペで使える biome.json【実戦版】

biome init が吐く最小構成をベースに、実務でそのまま使える形に整えたのがこちら。vcs.useIgnoreFile を有効にすると .gitignore を尊重してくれるので、node_modules などを別途書く必要がありません。

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

v2 では import 整列が organizeImports という独立フィールドから assist.actions.source.organizeImports 配下の「アシスト機能」へ移りました。

biome migrate はこの移動も自動でやってくれるので、v1 から上げる人も手作業は不要です。$schema のバージョン番号は init が導入済みの Biome に合わせて書き込むため、手で埋める必要はありません。

React / Next.js / Vue も自動で最適化（Domains）

v2 の便利機能が Domains です。react や next、test といった「領域」を指定するだけで、その環境向けの推奨ルール群がまとめて有効になります。プロジェクトの依存を見て自動で効かせることもできるので、フレームワークごとにプラグインを探して入れる手間が消えます。

{
  "linter": {
    "enabled": true,
    "rules": { "recommended": true },
    "domains": {
      "test": "recommended",
      "react": "recommended",
      "next": "recommended"
    }
  }
}

モノレポでも安心です。サブパッケージに biome.json を置き、"extends": "//" と書けばルートの設定を継承しつつ、その配下だけ上書きできます（ネスト設定）。

package.json のスクリプトはこう置き換える

lint と format が別々のコマンドだった時代は終わり。biome check ひとつで両方＋import整列まで回せます。

{
  "scripts": {
    "check": "biome check .",
    "fix": "biome check --write .",
    "format": "biome format --write ."
  }
}

check は読み取り専用（CIやコミット前チェック向け）、fix は自動修正つき。まずは npm run fix を一度回して、リポジトリ全体をBiome流に揃えてしまうのがおすすめです。

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

拡張機能 Biome（biomejs.biome）をインストールし、ワークスペースの .vscode/settings.json に次を追加します。保存するたびに整形とimport整列が走ります。

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "quickfix.biome": "explicit"
  }
}

ESLint 拡張と Prettier 拡張の両方を入れて「どっちがフォーマッタか」で悩む必要はもうありません。既定フォーマッタを Biome 一本に統一できます。

husky + lint-staged はもういらない

コミット前チェックの定番だった lint-staged も、実は不要になります。Biome にはステージ済みファイルだけを対象にする --staged フラグがあるためです。husky の pre-commit はこの1行で済みます。

# .husky/pre-commit
npx @biomejs/biome check --staged --write --no-errors-on-unmatched

CI で「差分のあるファイルだけ」チェックしたいときは --changed も使えます。lint-staged の設定ブロックがまるごと消えるのは地味に効きます。

GitHub Actions のCIも実質1行

CI では自動修正せず「問題があれば落とす」挙動が欲しいので、専用の biome ci を使います。公式の setup-biome アクションと組み合わせれば、これだけです。

name: CI
on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
      - run: biome ci .

乗り換え前に知っておくべき「正直な弱点」

とはいえ Biome は万能ではありません。ESLint を捨てる前に、次の点は必ず確認してください。

  • Vue / Svelte / Astro のサポートはまだ実験的。.vue のテンプレートを本格的に整形したい場合は現状 Prettier を併用する構成が無難
  • ESLint の膨大なコミュニティプラグイン（アクセシビリティ特化やライブラリ固有ルールなど）と完全に1対1では対応しない。使っていたルールが Biome にあるかは要確認
  • 型を意識したルールは搭載され始めたばかり。typescript-eslint の全機能を今すぐ置き換えられるわけではない
  • GritQL によるカスタムプラグインは書けるが、ESLint ほど自由度は高くない

逆に言えば、ふつうの React / Next.js / TypeScript プロジェクトなら、これらの弱点に当たらないことがほとんど。まずは新規プロジェクトや小さめのリポジトリで biome migrate を試し、体感速度と設定の軽さを味わってから本命に展開するのが安全です。

まとめ：設定沼から抜け出す2026年の選択

Biome への移行は、①追加 → ②migrate → ③check --write の3ステップ。うまくいけば10分で、依存パッケージは1つに、設定ファイルは biome.json 1枚に集約されます。速さ以上に「もう ESLint と Prettier の仲裁をしなくていい」という精神的な軽さが効きます。

ESLint / Prettier の設定手順を今も追い込みたい人は、こちらの記事も合わせてどうぞ。現状の構成を理解しておくと、Biome への移行判断もより的確になります。

ReactにESLint・Prettierを導入する完全ガイド【Vite・TypeScript・ESLint v9対応】Vite + React（TypeScript）にESLint v9とPrettierを導入する2026年版ガイド。flat config、VSCodeの保存時整形、husky・lint-stagedのコミット前チェック、動作確認まで解説します。frontendlab.magicgifted.com