Tech
Tips
Prettier + ESLint を卒業して Biome を導入する手順と所感
2025年9月23日
2025年9月23日
こんにちは、けいこんぐらです！
今回は、Biome を導入する手順とその所感を書きたいと思います 📝
今までは Prettier と ESLint を組み合わせて使用するのが一般的だったように思うのですが、Biome はこれらのツールの機能を統合して提供しています。
Biome 気になってる・聞いたことはあるけど、どんな感じか知りたい！という方の参考になれば幸いです。
インストール、設定、GitHooks あたりの手順を紹介できればと思います 🚀
Biome とは？
こちらですね！
改めて説明すると、Biome は以下のための高性能なフォーマッターとリンターを提供するツールです。
- JavaScript
- TypeScript
- JSX
- JSON
- CSS
- GraphQL
従来は、Prettier と ESLint を組み合わせて使用する都合上、設定を 2 重で行う必要があったり、ものによっては競合が発生したりといった問題がありました 😢
それらをまるっと解決してくれるのが Biome です。（全体的にパフォーマンスも良くなっているらしい）
まあ、一番何が嬉しいかというと、設定を一元管理できることですね。
まず所感
良かった点
- 設定を一元管理できる
- 設定がシンプル
- 公式ドキュメントも 1 箇所を見るだけでいい
- 別にルールをカスタマイズしなくても、いい感じに規制してくれる
- 速い
微妙？な点
- ルールをカスタマイズしたい場合、実験的なものとかも割とあるイメージ
1 年近く使用してみてますが、個人的には今のところ、そこまで不満は感じてません 👌
個人とか、小・中規模で普通に開発する分には十分かなと！
導入手順
ここまで読んで、Biome を使ってみたい！と思った方は、ぜひ以下の手順で導入してみてください！
インストール
package.json が含まれる Node.js の環境下で実行してください！
npm install --save-dev --save-exact @biomejs/biome設定
実行したら、biome.json が生成されます
npx @biomejs/biome init私は、こんな感じで設定して使っています！
- 好みのフォーマット設定
- TailwindCSS をよく使用するので、見栄えを良くするためにクラスをソートする設定
- Git 管理しているファイルに対してのみ実行する設定
{
"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false
},
"formatter": {
"enabled": true,
"indentStyle": "tab",
"indentWidth": 4,
"lineWidth": 120
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"nursery": {
"useSortedClasses": {
"level": "warn",
"fix": "safe",
"options": {}
}
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"jsxQuoteStyle": "single"
}
},
"assist": {
"enabled": true,
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}お好みの設定に変更してみてください！
クラスのソート設定は こちら
使い方
./app の箇所を変更して、対象ファイルやフォルダを選択しましょう 🙆♂️
# ./app配下に対して Format を実行
npx @biomejs/biome format --write ./app
# ./app配下に対して Lint を実行
npx @biomejs/biome lint --write ./app
# ./app配下に対して Format, Lint, インポートの整理 を実行
npx @biomejs/biome check --write ./appVSCode の設定
私は VSCode を使用しているので作業効率を上げるための設定も行っています！
拡張機能のインストール
Extension for Visual Studio Code - Toolchain of the web
https://marketplace.visualstudio.com
以下をサポートしてくれます！
- 保存時にフォーマット
- コードリファクタリング
- インライン提案とクイックフィックス
settings.json
この辺の設定を入れておくと、ファイル保存時に勝手にインポート文のソートやら、フォーマットが行われてめちゃ楽です 🚅
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit"
}
}
Git Hooks
Git のコミットやプッシュ時にフォーマットやリントを実行して、コードの品質や一貫性を維持できます！
今回は GitHooks に Lefthook というツールを使用します！
# lefthookのインストール
npm install lefthook --save-devルートに lefthook.yml というファイルを追加する 📂
# コミット前にフォーマットチェックやリントを行い、安全な修正を行う
pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
stage_fixed: true
# プッシュ前にフォーマットとリントのチェックを行う
pre-push:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}# Gitプロジェクトにインストールして設定を完了する
npx lefthook installこれで、コミット、プッシュ時にエラーがあると自動的にチェックしてくれるようになります ✅
Fast and powerful Git hooks manager for any type of projects. - evilmartians/lefthook
https://github.com
おわりに
今回は、Biome の導入手順と所感をまとめてみました！
この構成であれば、フォーマッターやリンターの設定を修正したいときは、biome.json を見るだけで済むので、かなり楽だと思います。（ほぼほぼややこしい設定もなし！）
私自身の開発体験もかなり良くなったと感じているので、興味がある方はぜひ試してみてください 🌟
