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からの移行を検討する価値があります。

参考リソース

• Biome 公式ドキュメント - 機能とガイド
• Biome GitHub リポジトリ - ソースコード
• Biome ブログ - リリース情報

×

PR

×

PR