ESLint + Prettier → Biome移行で設定ファイル7個を1個にした話
はじめに
モノレポでESLint + Prettierを使っていたが、設定ファイルが散らばって管理が面倒だった。Biomeに移行したら 設定ファイルが1個になり、実行速度も上がった。
Before: ESLint + Prettier地獄
cc-card/
├── .eslintrc.js # ルートESLint
├── .prettierrc.js # Prettier設定
├── api/
│ └── eslint.config.js # パッケージ個別設定
├── app/
│ └── eslint.config.js
├── db/
│ └── eslint.config.js
├── test/
│ └── eslint.config.js
├── ui/
│ └── eslint.config.js
├── utils/
│ └── eslint.config.js
└── tooling/
├── eslint-config.js # 共有設定
└── prettier-config.js
7個以上の設定ファイル。しかも各パッケージの設定ファイルは「共有設定を継承するだけ」の中身：
// api/eslint.config.js
module.exports = require('@cc-card/tooling/eslint-config');
After: Biome 1ファイル
cc-card/
└── biome.json # これだけ
{
"$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
"files": {
"includes": ["**/*"],
"excludes": ["**/dist", "**/.next", "**/node_modules"]
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"correctness": {
"noUnusedVariables": "error"
},
"suspicious": {
"noExplicitAny": "error"
}
}
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"trailingCommas": "es5",
"semicolons": "always"
}
}
}
移行手順
1. Biomeインストール
pnpm add -D @biomejs/biome -w
2. biome.json作成
pnpm biome init
3. Prettierの設定を移植
| Prettier | Biome |
|---|---|
singleQuote: true |
quoteStyle: "single" |
trailingComma: "es5" |
trailingCommas: "es5" |
semi: true |
semicolons: "always" |
tabWidth: 2 |
indentWidth: 2 |
4. ESLintルールの移植
よく使うルールの対応：
| ESLint | Biome |
|---|---|
no-unused-vars |
correctness/noUnusedVariables |
@typescript-eslint/no-explicit-any |
suspicious/noExplicitAny |
no-non-null-assertion |
style/noNonNullAssertion |
Biomeは recommended を有効にするとESLint recommendedに近いルールセットが適用される。
5. package.jsonのスクリプト更新
{
"scripts": {
"lint": "biome check .",
"format": "biome format --write .",
"format:check": "biome format ."
}
}
6. 旧設定ファイル削除
rm -rf .eslintrc* .prettierrc*
rm -rf api/eslint.config.js app/eslint.config.js ...
rm -rf tooling/src/eslint-config.js tooling/src/prettier-config.js
7. lefthook/huskyの設定更新
# lefthook.yaml
pre-commit:
commands:
format:
glob: "*.{js,jsx,ts,tsx,json}"
run: pnpm biome format --write {staged_files} && pnpm biome check {staged_files}
速度比較
簡易計測（9パッケージ、約500ファイル）：
| ツール | lint | format |
|---|---|---|
| ESLint + Prettier | ~8秒 | ~3秒 |
| Biome | ~1秒 | ~0.5秒 |
約8倍高速。Rust製の恩恵。
移行で詰まったところ
1. import orderの設定
ESLintの import/order に相当する機能はBiomeにもあるが、設定方法が異なる。
{
"assist": {
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}
biome check --fix で自動整理される。
2. 一部のESLintルールがない
BiomeはまだESLintの全ルールをカバーしていない。特に：
- React Hooksルール（
react-hooks/exhaustive-deps等） - 一部のTypeScript-ESLintルール
必要なら ESLint を併用する手もあるが、私のプロジェクトでは Biome だけで十分だった。
3. VSCode拡張の変更
ESLint拡張 → Biome拡張に変更。
// .vscode/settings.json
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
}
まとめ
| 項目 | Before | After |
|---|---|---|
| 設定ファイル数 | 7+ | 1 |
| 依存パッケージ | eslint, prettier, 各種プラグイン | @biomejs/biome |
| lint速度 | ~8秒 | ~1秒 |
| format速度 | ~3秒 | ~0.5秒 |
メリット：
- 設定が1ファイルで完結
- 高速
- ESLint + Prettierの設定の競合問題がなくなる
デメリット：
- 一部のESLintルールが未対応
- エコシステムがまだ成熟していない
モノレポで設定ファイルが散らばって困っている人には特におすすめ。
本記事の内容は Biome 1.9.x で動作確認済みです。
関連記事
pre-commit hookの設定でハマった場合はこちらも参照：
参考
noteでは「AI × 技術 × ビジネス」視点で書いています
Qiitaでは純粋な技術Tipsを、noteでは「その技術をどう活かすか」というPM/事業視点の記事を書いています。
- Qiita: ハマりポイント、解決策、設定方法
- note: AI駆動開発の実践、技術選定の判断軸、放置プロジェクトの救い方