ESLint + Prettierはもう古い？Biomeで爆速リント＆フォーマット環境を構築

はじめに

フロントエンド開発で避けて通れないESLint + Prettierの設定。

// package.json の devDependencies が地獄...
"eslint": "^8.x",
"prettier": "^3.x",
"eslint-config-prettier": "^9.x",
"eslint-plugin-prettier": "^5.x",
"@typescript-eslint/eslint-plugin": "^7.x",
"@typescript-eslint/parser": "^7.x",
// まだまだ続く...

Biomeを使えば、これがたった1行になります。

"@biomejs/biome": "^2.x"

本記事では、ESLint + PrettierからBiomeへの移行方法と、実際に使ってわかったメリット・デメリットを解説します。

Biomeとは

Biome（読み方：バイオーム）は、Rust製のWebツールチェーンです。

1つのツールで全部できる

対応言語

• JavaScript / TypeScript
• JSX / TSX
• JSON / JSONC
• CSS（v2〜）
• GraphQL
• HTML（v2〜）

なぜBiomeなのか

1. 圧倒的な速度

ESLint:   1000ファイル → 1〜2秒
Biome:    1000ファイル → 50ms

ESLintの15倍以上高速です。

Rustで書かれており、マルチスレッドで全CPUコアを活用します。ESLintはデフォルトでシングルスレッドです。

2. 設定がシンプル

// biome.json - これだけ
{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

ESLint + Prettierでは、.eslintrc.js、.prettierrc、.eslintignore、.prettierignore...と設定ファイルが増殖しがちですが、Biomeはbiome.json 1ファイルで完結します。

3. 425のルールを標準搭載

ESLint、TypeScript ESLint、その他のソースから425のルールを搭載。

プラグインをインストールしなくても、すぐに使えます。

4. Prettierとの互換性97%

フォーマット結果はPrettierと97%互換。移行してもコードの見た目はほぼ変わりません。

移行手順

ステップ1：インストール

# npm
npm install --save-dev @biomejs/biome

# pnpm
pnpm add -D @biomejs/biome

# yarn
yarn add -D @biomejs/biome

# bun
bun add -D @biomejs/biome

ステップ2：初期設定

npx @biomejs/biome init

biome.json が生成されます。

ステップ3：既存設定の移行

ESLintとPrettierの設定を自動で移行できます：

# ESLintの設定を移行
npx @biomejs/biome migrate eslint --write

# Prettierの設定を移行
npx @biomejs/biome migrate prettier --write

実行後、biome.json に設定がマージされます。

ステップ4：旧ツールの削除

npm uninstall eslint prettier eslint-config-prettier \
  eslint-plugin-prettier @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser

設定ファイルも削除：

rm .eslintrc.js .eslintrc.json .prettierrc .eslintignore .prettierignore

ステップ5：package.jsonのスクリプト更新

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

biome check は、リント + フォーマット + インポート整理を一括実行します。

VSCode設定

拡張機能のインストール

VSCode拡張機能「Biome」をインストールします。

settings.json

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

これで保存時に自動フォーマット + インポート整理が走ります。

実践的な設定例

Next.jsプロジェクト向け

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedImports": "error",
        "noUnusedVariables": "warn"
      },
      "style": {
        "noNonNullAssertion": "warn",
        "useConst": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  },
  "files": {
    "ignore": [
      "node_modules",
      ".next",
      "out",
      "dist",
      "*.min.js"
    ]
  }
}

monorepo向け（ルート設定の共有）

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedImports": "off"
      }
    }
  }
}

Biome v2の新機能

2025年にリリースされたBiome v2では、さらに強力になりました。

型認識リンティング

TypeScriptコンパイラに依存せず、型情報を使ったリンティングが可能に。

# typescriptパッケージなしでもリント可能
npx @biomejs/biome lint .

CSSサポート

{
  "css": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2
    },
    "linter": {
      "enabled": true
    }
  }
}

HTMLサポート（実験的）

{
  "html": {
    "formatter": {
      "enabled": true
    }
  }
}

メリット・デメリット

メリット

デメリット

移行すべき？

✅ 移行推奨
- 新規プロジェクト
- React / Next.js / Node.js プロジェクト
- CI時間を短縮したい
- 設定の複雑さに疲れた

❌ 様子見
- Vueメインのプロジェクト
- 特殊なESLintプラグインに依存
- 既存の設定で満足している

CI設定例

GitHub Actions

name: Biome

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

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

biome ci は、フォーマット違反があればエラーで終了します（CIに最適）。

まとめ

Biomeは、ESLint + Prettierの「設定地獄」から解放してくれる救世主です。

導入のステップ：

1. npm install -D @biomejs/biome
2. npx @biomejs/biome init
3. npx @biomejs/biome migrate eslint --write
4. 旧ツールを削除
5. VSCode拡張をインストール

新規プロジェクトなら、迷わずBiomeを選ぶ時代になりました。

---

参考リンク：

• Biome公式サイト
• ESLint + Prettierから乗り換えて感じた、Biomeの魅力 - Qiita
• ESLint + PrettierからBiomeへの移行 - Zenn
• Biome v2リリースノート