pnpm + Vite + React + Biome ハンズオン

Biomeを使うメリット

依存関係削減: ESLint + 複数のeslintプラグイン → Biome 1つで代用
高速: ESLintより高速、CIとしての実行が早い
統合ツール: linting + formatting + import整理が1つのコマンド
設定が簡単: biome.json にまとめて記載するだけ
CI/CD高速化: 依存関係インストール・実行時間短縮、biome 1つインストールするだけ

プロジェクト作成

コマンド

pnpm create vite my-react-biome-app --template react-ts
cd my-react-biome-app
pnpm install

初期状態の確認

package.json

{
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2", 
    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5"
  }
}

11個のパッケージ でスタート

enumura1

Biomeインストール

コマンド

pnpm add -D -E @biomejs/biome

オプションの意味

-E: 厳密バージョン固定（"2.0.0" として保存）

Version pinning
-E ensures that the package manager pins the version of Biome. See the versioning page for more information about why pinning the version is important.
https://biomejs.dev/guides/getting-started/
ドキュメントにならって-Eでバージョンを固定しパッケージをインストール

実行ログ

Packages: +3
+++
Downloading @biomejs/cli-linux-x64-musl@2.0.0: 13.13 MB/13.13 MB, done
Downloading @biomejs/cli-linux-x64@2.0.0: 13.18 MB/13.18 MB, done
Progress: resolved 241, reused 189, downloaded 3, added 3, done
devDependencies:
+ @biomejs/biome 2.0.0
Done in 5.1s using pnpm v10.12.1

Biome初期化

コマンド

pnpm biome init

実行ログ

Welcome to Biome! Let's get you started...
Files created 
  - biome.json
    Your project configuration. See https://biomejs.dev/reference/configuration
Next Steps 
  1. Setup an editor extension
  2. Try a command
     biome check  checks formatting, import sorting, and lint rules.
     biome --help displays the available commands.
  3. Migrate from ESLint and Prettier
     biome migrate eslint   migrates your ESLint configuration to Biome.
     biome migrate prettier migrates your Prettier configuration to Biome.

作成された biome.json

biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

enumura1

ESLint設定自動移行

コマンド

pnpm biome migrate eslint --write

`--write` の意味

--writeあり: biome.jsonを実際に更新
--writeなし: 変更内容をプレビューのみ

実行ログ

ℹ 78% (71/91) of the rules have been migrated.

ℹ Migrated rules:
- constructor-super
- for-direction
- getter-return
- no-array-constructor
- no-async-promise-executor
[... 65個のルール ...]
- react-hooks/exhaustive-deps
- react-hooks/rules-of-hooks

ℹ Rules that can be migrated to an inspired rule using --include-inspired:
- no-cond-assign
- @typescript-eslint/ban-ts-comment
- @typescript-eslint/no-this-alias
- react-refresh/only-export-components

ℹ Rules that can be migrated to a nursery rule using --include-nursery:
- no-constant-binary-expression
- no-useless-backreference

ℹ Unsupported rules:
- no-delete-var
- no-invalid-regexp
[... 11個のレガシールール ...]

configuration
ℹ Migration results:

移行率の説明

78% (71/91): 実用的なルールは全て移行完了
inspired rules: Biome独自の改良版ルール
nursery rules: 開発中の実験的ルール
unsupported rules: サポートされてないレガシールール

enumura1

ESLint関連パッケージ削除

ViteでReactプロジェクトを作成した際に、デフォルトでインストールされてるeslint関連のパッケージを削除。

コマンド

pnpm remove eslint @eslint/js eslint-plugin-react-hooks eslint-plugin-react-refresh globals typescript-eslint

実行ログ

Already up to date
Progress: resolved 121, reused 72, downloaded 0, added 0, done

devDependencies:
- @eslint/js 9.29.0
- eslint 9.29.0
- eslint-plugin-react-hooks 5.2.0
- eslint-plugin-react-refresh 0.4.20
- globals 16.2.0
- typescript-eslint 8.34.1

Done in 3.2s using pnpm v10.12.1

設定ファイル削除

rm eslint.config.js

enumura1

package.json スクリプト更新

Before

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

After

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write ."
  }
}

コマンドの違い

lint: チェックのみ（修正しない）
lint:fix: チェック + 自動修正
format: フォーマットのみ（lint問題は対象外）

enumura1

動作確認

pnpm run lint:fix

で自動修正してから、rm eslint.config.jsでファイルを削除。

package.json (修正後の状態)

{
  "name": "my-react-biome-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "format": "biome format --write .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@biomejs/biome": "2.0.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
    "typescript": "~5.8.3",
    "vite": "^6.3.5"
  }
}

初期だとdevDependenciesは11個パッケージの記載があったが、eslintからbiome導入により6個になった。

このスクラップは2ヶ月前にクローズされました

Biomeを使うメリット

プロジェクト作成

コマンド

初期状態の確認

Biomeインストール

コマンド

オプションの意味

実行ログ

Biome初期化

コマンド

実行ログ

作成された biome.json

ESLint設定自動移行

コマンド

--write の意味

実行ログ

移行率の説明

ESLint関連パッケージ削除

コマンド

実行ログ

設定ファイル削除

package.json スクリプト更新

Before

After

コマンドの違い

動作確認

package.json (修正後の状態)

`--write` の意味