【Biome】PrettierとESLintをまとめて使える？Biome試してみた

投稿日 2024/02/04

最近リリースされたばかりのFormatter + LinterツールであるBiome

ほとんど設定を書くことなく、かつてのESLintの機能を導入することができるみたい。

公式の説明によると、

Rustで構築されているため高速
設定なしで始められるためシンプル
あらゆる規模のコードベースに対応するように設計されているためスケーラブル

などなど、とてもすごそうな感じ。

早速試してみよう。

インストール

npm install -D --save-exact @biomejs/biome

公式からはバージョンの範囲演算子（^とか~とか）を使用しないことを強く推奨しているみたいです。

まだ開発途中だからマイナーバージョンでも動かなくなってしまうのでしょうか…

設定

npx @biomejs/biome init

initコマンドでルートディレクトリにbiome.jsonが生成されますのでここに必要があれば設定を記述していきます。

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

通常と同じようにプラグインをインストールします。以下からインストールもできます。

Biome VS Code extension

IntelliJ

私も使っているJetBrains系のIDEもプラグインがあったので入れてみました。

こちらも通常と同じようにマーケットプレイスからBiomeと検索してインストールできました。

他にも私は使ってないので試していませんが、NeoVimやsublime textでもプラグインがあるようなのでもしお使いの方はチェックしてみてください。

公式プラグイン

設定ファイル

何も書かずとも基本的には動くようになっているので、初期状態から何もしなくても良かったのですが、少し変更してみました。

biome.json

{
  "$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の時に設定していた内容と同じようにしてみました。

感覚的には同じような感じで設定できると思うので簡単でした。

その他設定項目は以下から確認してみてください。

Configuration

まとめ

使ってみた感想は、

PrettierとESLintが一緒になって設定ファイルも少ないので導入が楽
アップデートも多いのでどんどん成長して使いやすくなりそう
個人で使うなら全然あり
でもESLintで使えるようなプラグイン周りはないのでこれには期待

と、言ったような感じで、フレームワークを使わず行うプロジェクトであればむしろ使うべきではと思いました。

ただ、Next.js等で使おうと思ったらまだ整ってない部分も多そうなのでこの辺は今後のアップデートでどうなるか楽しみです。

スピードもめちゃくちゃ速いので興味のある方は是非使ってみてください。

#JavaScript #TypeScript #Biome #Productivity

インストール
設定
使用方法
format
linter
check
エディタに追加
VS Code
IntelliJ
設定ファイル
まとめ