Zenn
Closed9

初めての Biome

TypeScript
Biome
kwnkwn

https://biomejs.dev/ja/

  • 出始めの話題になっていた時期から気になってはいたものの触れてなかったBiomeを使ってみる
  • ESLint + Prettierの役割を一つで担ってくれてしかも高速ということで良さそうだと思っている
kwnkwn

インストール

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

Biomeをインストールする際には、バージョン範囲演算子を使用しないことを強く推奨しています。詳しくは、バージョニング ページをご覧ください。

kwnkwn

設定

npx @biomejs/biome init

以下のファイルが生成された。

biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

linter.enabled: true はlinterを有効にし、 rules.recommended: true は推奨ルールを有効にします。

この設定では、formatter.enabled: false で明示的にformatを無効化していないため、formatは有効になっています。

kwnkwn

使い方

format コマンドを --write オプションを指定し実行することで、ファイルやディレクトリをformatできます。

npx @biomejs/biome format --write <files>

lint コマンドを --apply オプションを指定し実行することで、ファイルやディレクトリに対してLintを実行し、安全な修正を適用できます。

npx @biomejs/biome lint <files>

check コマンドを実行することで、それら両方のコマンドを実行できます。

npx @biomejs/biome check --apply <files>

check コマンドは複数のツールを一度に実行するためのコマンドです。現在は以下のことを行います。

  • ファイルのformat
  • ファイルのlint
  • インポートの整理

format + lintを一度に実行してくれるcheckコマンドがあるのは嬉しい。
両方を担ってくれるツールならではの良さな気がする。

kwnkwn

VS Code に導入

https://biomejs.dev/ja/reference/vscode/

とりあえず今回はインストールしたプロジェクトにだけ設定できればいいので.vscode/settings.jsonを作成。言語関係なくdefaultFormatterにBiomeを設定し、保存時にformatを実行して修正するように設定。

.vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"
  }
}
kwnkwn

フォーマッター > インデントスタイル

フォーマットを実行してみて、インデントスタイルがタブであることに気づいた。
ドキュメントに以下のように記載されていた。

Biomeがサポートする、言語に依存しないオプションは以下の通りです。

  • インデントスタイル (デフォルト： tab): インデントにはスペースまたはタブを使用します
  • タブ幅 (デフォルト： 2): インデントレベルごとのスペースの数です。
  • 行幅 (デフォルト： 80): Biomeがコードを折り返す列幅です。

https://biomejs.dev/ja/formatter/

インデントスタイルをとりあえず慣れているスペースに変更しておく。

biome.json
"formatter": {
  "indentStyle": "space"
}
このスクラップは2024/04/13にクローズされました