Biome 完全ガイド【2026年最新・v2.3対応】｜ESLint + Prettier を 1 ツールで置換・biome.json・Type Inference・Plugin (GritQL)・Monorepo ネスト設定・Vue/Svelte/Astro 対応・ESLint/Prettier からの移行まで実戦パターンで解説

# npm / pnpm / yarn いずれでも可
npm install --save-dev --save-exact @biomejs/biome

# Bun
bun add -d --exact @biomejs/biome

# Deno（dlx スタイル）
deno run -A npm:@biomejs/biome init

# ※ --save-exact は必須級。パッチでもフォーマット出力が変わるため、
# プロジェクトメンバーで同一バージョンを固定するのが鉄則

# biome.json を生成（デフォルト推奨値で）
npx @biomejs/biome init

# プロジェクトに biome.json が作成される
# $schema が付くので VSCode 等で補完が効く

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
  "files": {
    "includes": ["**/*.{ts,tsx,js,jsx,json,css}"],
    "experimentalScannerIgnores": ["node_modules", "dist", ".next"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": {
    "formatter": { "quoteStyle": "double", "semicolons": "always", "trailingCommas": "all" }
  },
  "assist": {
    "enabled": true,
    "actions": { "source": { "organizeImports": "on" } }
  }
}

# ① 一括チェック（lint + format + import sort を全部）
npx biome check .

# ② 自動修正（修正可能なもの）
npx biome check --write .

# ③ unsafe な修正も含めて適用（慎重に）
npx biome check --write --unsafe .

# ④ フォーマットのみ / リントのみ
npx biome format --write .
npx biome lint .

# ⑤ CI 向け（書き換えず、差分があったら fail）
npx biome ci .
npx biome check --reporter=github .     # GitHub Actions の inline annotation

# 特定ファイルだけ
npx biome check src/utils/
npx biome lint src/server.ts

# stdin 経由（エディタ連携などで使う）
echo "const x =1;" | npx biome format --stdin-file-path=x.ts

{
  "files": {
    "includes": [
      "**/*.{ts,tsx,js,jsx,mjs,cjs}",
      "**/*.{json,jsonc}",
      "**/*.{css,scss}",
      "!**/generated/**"            // 先頭 ! で除外
    ],
    "experimentalScannerIgnores": [
      "node_modules", "dist", "build", ".next", ".turbo", "coverage"
    ],
    "ignoreUnknown": true
  }
}

{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf",
    "bracketSpacing": true,
    "attributePosition": "auto"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "jsxQuoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always",
      "bracketSameLine": false
    }
  },
  "json": {
    "formatter": { "indentWidth": 2, "trailingCommas": "none" }
  },
  "css": {
    "formatter": { "quoteStyle": "double" }
  }
}

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "warn",
        "noUnusedImports": "warn"
      },
      "suspicious": {
        "noExplicitAny": "error",
        "noFloatingPromises": "error"     // Type Inference ルール（後述）
      },
      "style": {
        "useConst": "error",
        "useImportType": "error"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": { "attributes": ["className"], "functions": ["clsx", "cn", "tw"] }
        }
      }
    }
  }
}

# 1) Biome をインストール
npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init

# 2) ESLint 設定を取り込む
npx @biomejs/biome migrate eslint --write

# 3) Prettier 設定を取り込む
npx @biomejs/biome migrate prettier --write

# 結果: biome.json に ESLint ルール互換と Prettier 整形規則がマージされる

{
  "scripts": {
    "check":  "biome check .",
    "check:fix": "biome check --write .",
    "format": "biome format --write .",
    "lint":   "biome lint .",
    "ci":     "biome ci ."
  },
  "devDependencies": {
    "@biomejs/biome": "2.3.0"
  }
}

# 依存を削減（動作確認後）
npm uninstall \
  eslint prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-config-prettier eslint-plugin-import \
  eslint-plugin-unused-imports eslint-plugin-react-hooks

# .eslintrc.* / .prettierrc.* / .eslintignore / .prettierignore を削除
rm -f .eslintrc.* .prettierrc* .eslintignore .prettierignore

// biome.json で "suspicious.noFloatingPromises": "error" を有効化すると

async function saveUser() { return db.user.update({ ... }); }

function handler() {
  saveUser();                // ❌ Biome: Promise を await していない
}

async function ok() {
  await saveUser();          // ✓
  void saveUser();           // ✓ 明示的に無視する場合
}

{
  "plugins": ["./plugins/no-console-log.grit"]
}

// 関数呼び出しのパターン: fn(args)
`$fn($args)` where {
  $fn <: `console.log`,
  register_diagnostic(
    span = $fn,
    message = "console.log はコミットしない。logger.* に置き換えてください。",
    severity = "error"
  )
}

`Object.assign($target, $source)` where {
  $target <: `{}`,
  register_diagnostic(
    span = $source,
    message = "オブジェクトリテラルには spread 演算子を使ってください"
  )
}

{
  "files": {
    "experimentalScannerIgnores": ["node_modules", "dist"]
  },
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedImports": "error",
        "noUnusedVariables": "error"
      },
      "nursery": {
        "noPrivateImports": "error"   // パッケージ境界を越えた import を禁止
      }
    }
  }
}

// before
import { useState } from "react";
import { useEffect } from "react";
import { atom } from "jotai";
import { useAtom } from "jotai";

// after（biome check --write で自動整理）
import { useEffect, useState } from "react";
import { atom, useAtom } from "jotai";

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "groups": [
              ":NODE:",                    // node:* モジュール
              ":BUN:",                     // bun:* モジュール
              ":PACKAGE:",                 // 外部 npm / jsr パッケージ
              ":BLANK_LINE:",
              ["@myorg/**", "@/**"],       // 社内パッケージ・パスエイリアス
              ":BLANK_LINE:",
              ["./**", "../**"],           // 相対パス
              ":BLANK_LINE:",
              ":TYPE:"                     // import type のみ末尾に
            ]
          }
        }
      }
    }
  }
}

// before（useSortedKeys を有効化しているとき）
const config = { z: 1, a: 2, m: 3 };

// after
const config = { a: 2, m: 3, z: 1 };

{
  "assist": {
    "actions": {
      "source": {
        "organizeImports": "on",
        "useSortedKeys": "on",
        "useSortedAttributes": "on"
      }
    }
  }
}

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
  "formatter": { "indentStyle": "space", "lineWidth": 100 },
  "linter": { "rules": { "recommended": true } }
}

{
  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
  "extends": "//",               // ルートを継承（// はプロジェクトルートを指す）
  "root": false,                 // サブプロジェクトであることを明示
  "linter": {
    "rules": {
      "suspicious": { "noConsoleLog": "error" }
    }
  }
}

# ルートから実行するとネストされた biome.json も尊重される
npx biome check .

# Turborepo / pnpm workspaces からも同じように呼べる
pnpm -r exec biome check .

{
  "files": {
    "includes": [
      "**/*.{ts,tsx,js,jsx,json,css}",
      "**/*.vue",
      "**/*.svelte",
      "**/*.astro"
    ]
  },
  "vue":    { "formatter": { "enabled": true } },
  "svelte": { "formatter": { "enabled": true } },
  "astro":  { "formatter": { "enabled": true } }
}

# 拡張 ID: biomejs.biome
code --install-extension biomejs.biome

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

name: Biome
on: [push, pull_request]
jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: biomejs/setup-biome@v2
        with: { version: 2.3.0 }
      - run: biome ci --reporter=github .

name: Biome (npm)
on: [pull_request]
jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v5
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npx biome ci --reporter=github .

npm install -D husky lint-staged
npx husky init

cat > .husky/pre-commit <<'EOF'
#!/usr/bin/env sh
npx lint-staged
EOF

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,json,jsonc,css}": [
      "biome check --write --no-errors-on-unmatched"
    ]
  }
}

# npm / pnpm / yarn
npx biome check .
pnpm biome check .

# Bun
bunx biome check .
bun run biome check .

# Deno
deno run -A npm:@biomejs/biome@2.3.0 check .

# Docker（CI での pinning）
docker run --rm -v "$PWD":/src -w /src ghcr.io/biomejs/biome:2.3.0 check .