【Biome】PrettierとESLintをまとめて使える?Biome試してみた
最近リリースされたばかりのFormatter + LinterツールであるBiome
ほとんど設定を書くことなく、かつてのESLintの機能を導入することができるみたい。
公式の説明によると、
- Rustで構築されているため高速
- 設定なしで始められるためシンプル
- あらゆる規模のコードベースに対応するように設計されているためスケーラブル
などなど、とてもすごそうな感じ。
早速試してみよう。
インストール
npm install -D --save-exact @biomejs/biome
公式からはバージョンの範囲演算子(^とか~とか)を使用しないことを強く推奨しているみたいです。
まだ開発途中だからマイナーバージョンでも動かなくなってしまうのでしょうか…
設定
npx @biomejs/biome init
init
コマンドでルートディレクトリにbiome.json
が生成されますのでここに必要があれば設定を記述していきます。
{
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
これが生成されるのですが、基本的な設定はデフォルトで動くようになっているようです。
では次は使い方です。
使用方法
format
Prettierと同じような役割を果たすformat
コマンドです。
使い方は結構似ています。
biome format <path or file>
こちらは修正できる箇所があるかを表示してくれます。
修正はしてくれません。一緒に修正をするには以下のようにしましょう。
biome format --write <path or file>
これで一緒に修正もしてくれます。
linter
ESlintと同じような役割を果たすlint
コマンドです。
biome lint <path or file>
こちらもformat
と同じく結果だけを返してくれます。
biome lint --apply <path or file>
lint
の場合は--apply
を使用することにより安全な修正をしてくれます。
ここで言う安全な修正とはコードが壊れる心配がない部分を自動で変更するようです。
詳しくはこちら
check
最後に上記二つを合わせてさらにimport文
の並び替えもやってくれるcheck
コマンドです。
biome check --apply <path or file>
個人的にはこれが一番使うかなといった感じです。
エディタに追加
biomeを自身のエディタに導入すれば、保存時にフォーマットしてくれたりなどより便利に使えるようなのでプラグインをインストールしておきます。
VS Code
通常と同じようにプラグインをインストールします。 以下からインストールもできます。
IntelliJ
私も使っているJetBrains系のIDEもプラグインがあったので入れてみました。
こちらも通常と同じようにマーケットプレイスからBiome
と検索してインストールできました。
他にも私は使ってないので試していませんが、NeoVim
やsublime text
でもプラグインがあるようなのでもしお使いの方はチェックしてみてください。
設定ファイル
何も書かずとも基本的には動くようになっているので、初期状態から何もしなくても良かったのですが、少し変更してみました。
{
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
"organizeImports": {
"enabled": true
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"formatWithErrors": true
},
"javascript": {
"formatter": {
"enabled": true,
"quoteStyle": "single",
"jsxQuoteStyle": "single",
"trailingComma": "all",
"semicolons": "asNeeded"
}
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
変更したことは…
- formatter(共通)
- フォーマッターのインデントを
space
に変更 - インデント幅をスペース2つに変更
- 構文エラーがあってもフォーマットを実行
- フォーマッターのインデントを
- formatter(JS)
- シングルクオートに変更
- カンマを付けない
- セミコロンは必要時のみ
よくPrettier
の時に設定していた内容と同じようにしてみました。
感覚的には同じような感じで設定できると思うので簡単でした。
その他設定項目は以下から確認してみてください。
まとめ
使ってみた感想は、
- PrettierとESLintが一緒になって設定ファイルも少ないので導入が楽
- アップデートも多いのでどんどん成長して使いやすくなりそう
- 個人で使うなら全然あり
- でもESLintで使えるようなプラグイン周りはないのでこれには期待
と、言ったような感じで、フレームワークを使わず行うプロジェクトであればむしろ使うべきではと思いました。
ただ、Next.js
等で使おうと思ったらまだ整ってない部分も多そうなのでこの辺は今後のアップデートでどうなるか楽しみです。
スピードもめちゃくちゃ速いので興味のある方は是非使ってみてください。