【Biome(バイオーム)】JavaScript/TypeScript などをフォーマット/リントできる開発ツール biomejs を使ってみた。

最終更新日: 2024-09-09

Biome(バイオーム)は、ファイルのフォーマットとリントをこれ１つでやってくれる Rust 製の開発ツール。

以下引用

Prettierのようにコードをformat、しかも高速 Biome は JavaScript、TypeScript、JSX そして JSON のための高速なformatter であり、 Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。 biomejs.dev

目次

• 概要
• インストール
• 設定ファイル
  • 実行方法
  • 設定の変更
• VSCode の拡張機能
• 最後に

概要

フォーマットとリントを１つにまとめた開発ツールで Prettier/ESLint の代替になる。 Rust で書かれていてフォーマッターが非常に高速とのこと。 公式サイト(ほぼ日本語化されてる) と GitHubリポジトリ

2024年9月現在(v1.8.3)のサポート状況は Vue は部分的サポート HTML と YAML は進行中で Markdown はサポートされていない。 因みに Prettier が対応している言語は こちら

biome のフォーマッターと Prettier との違いについては ここ に載ってる。

インストール

現在のディレクトリにインストール(クローバルにインストールするのは非推奨)

$ yarn add --dev --exact @biomejs/biome

設定ファイル

設定ファイル biome.json の作成。

$ yarn biome init

biome.json の内容。

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

実行方法

適当に JavaScript のファイルを作成して無駄に雑に書いて以下のコマンドで実行する。 フォーマッターのみ実行する場合は check の部分を format に、リンターのみ実行する場合は lint にする。

$ yarn biome check --write index.js

実行したらインデントがデフォルトではタブ２つになってる。スペース２つじゃないんか！？

設定の変更

設定ファイルに追記してスペース２つにしたり、他の設定を追加する。 設定に関するリファレンスは ここ

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
  "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 120
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "all",
      "semicolons": "always",
      "bracketSpacing": false
    }
  }
}

formatter.enabled, javascript.formatter.trailingCommas, javascript.formatter.semicolons はデフォルトの設定と同じだけど明示したい。

formatter.lineWidth は、お折り返し位置を決める一行の文字数でデフォルトは 80。Prettier と同じ

javascript.formatter.quoteStyle は、文字列をダブル/シングルクォートのどちらで囲むか。デフォルトは “double”

javascript.formatter.bracketSpacing は、配列とかの値と値の間にスペースを追加するやつ。デフォルトは true

VSCode の拡張機能

公式に 拡張機能 が提供されている。 インストールはコマンドパレットから以下を実行。

ext install biomejs.biome

ディレクトリごとの VSCode の設定ファイルを作成。

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": false,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

VSCode の他にも IntelliJ IDEA と Zed エディター向けに biome公式で拡張機能が提供されいる。

最後に

今までだと Prettier と ESLint の２つをインストールして、それぞれの設定ファイルを作っていたわけだけど、その手間が半分になるのは素晴らしい。 Prettier, ESLint から移行するための設定ファイルを変換するコマンドまで用意されている。素晴らしい。

biome migrate eslint --write
biome migrate prettier --write

個人的には Vue は使ってないし、Markdown には vscode.markdown-language-features を使ってる。 HTML とか CSS も VSCode デフォルトのフォーマッターでいけるはず。あとは YAML だけど、今後はもう biome で良いと思った。

気になったことはデフォルでタブ２つなことと、開発初期のものかも知れないけど廃止になってる設定がいくつかある。 わかるけど破壊的変更はできれば無しでお願いしたい。