Biome 2.0 - 次世代Rustベースツールチェーン

Biome 2.0とは

Biome 2.0は、Rustで書かれた高速なJavaScript/TypeScriptツールチェーンです。フォーマッター、リンター、インポート整理を1つのツールで提供し、ESLint + Prettierの代替として人気を集めています。

参考: Biome - One toolchain for your web project

2.0の新機能

1. CSSサポート

待望のCSSフォーマット・リントが正式サポートされました。

/* Before */
.container{display:flex;justify-content:center;align-items:center}

/* After (Biome formatted) */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. GraphQLサポート

GraphQLスキーマとクエリのフォーマット・リントも追加。

# Before
query GetUser($id:ID!){user(id:$id){name email}}

# After (Biome formatted)
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}

3. プラグインシステム

GritQLベースのプラグインシステムで独自ルールを追加可能。

// biome.json
{
  "plugins": ["@biomejs/plugin-react-hooks"],
  "linter": {
    "rules": {
      "custom/my-rule": "error"
    }
  }
}

4. パフォーマンス改善

ESLint + Prettier からの移行

インストール

# npmの場合
npm install --save-dev @biomejs/biome

# pnpmの場合
pnpm add -D @biomejs/biome

# bunの場合
bun add -d @biomejs/biome

設定ファイル

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExcessiveCognitiveComplexity": "error"
      },
      "correctness": {
        "noUnusedImports": "error",
        "noUnusedVariables": "warn"
      },
      "style": {
        "useConst": "error",
        "useTemplate": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all",
      "semicolons": "always"
    }
  },
  "css": {
    "formatter": {
      "enabled": true
    },
    "linter": {
      "enabled": true
    }
  }
}

ESLint設定からの移行

# ESLint設定を自動変換
npx @biomejs/biome migrate eslint --write

コマンド

# フォーマット
biome format --write .

# リント
biome lint .

# フォーマット + リント + インポート整理
biome check --write .

# CI用（修正せずチェックのみ）
biome ci .

IDE統合

VS Code

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

package.json scripts

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

Biome vs ESLint + Prettier

主要な新ルール

2.0で追加されたルール

// noFloatingPromises - Promiseの未処理を検出
async function fetchData() {
  fetch('/api/data'); // Error: Promise not handled
}

// useExhaustiveDependencies - React Hooks依存配列
useEffect(() => {
  console.log(count);
}, []); // Error: 'count' missing in dependencies

// noConsole - console使用を制限
console.log('debug'); // Warning: Remove console statement

GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

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

関連ツールとの比較

まとめ

Biome 2.0は、Webフロントエンド開発のツールチェーンとして大きく進化しました。

• CSS/GraphQL対応: フルスタックなフォーマット・リント
• プラグインシステム: 独自ルールの追加が可能
• 40%高速化: 大規模プロジェクトで効果絶大
• 簡単移行: ESLint設定の自動変換

ESLint + Prettierからの移行を検討する価値があります。