雑記帳

整理しない情報集

更新情報

Biomeを使ってみる

公開日:

カテゴリ: 開発

ESLintやPrettierは依存関係が多かったり、設定が多すぎてあまり導入する気になれないので、代わりにネイティブで高速に動作するBiomeというRust製のフォーマッタを使ってみました。

特徴

  • ESLintとPrettierを足したようなツール
  • NPMパッケージの依存なし
  • 実行ファイル単体でも動作可能(esbuildみたいな)
  • 設定はbiome.jsonのみで完結
  • VSCode用の拡張機能あり

インストール

通常はNPMパッケージ利用で使用することになると思いますが、前述の通り実行ファイル単体でも動作します。NPMパッケージか実行ファイルのいずれか+VSCode拡張機能の構成になるでしょう。

NPMパッケージ利用

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome init
# --jsonc オプションを追加するとJSONC形式で設定ファイルを作成できる

実行ファイル単体

GitHubのリリースページからダウンロードできます。

一覧では開発ビルドが多いので、最新リリース(Latest)リンクが便利です。

VSCode拡張機能

Biomeで検索するとヒットします。VSCodiumでVSIXファイルからインストールする場合はこちら

使い方

コマンドライン

以下は実行ファイルを直接実行する場合のコマンドです。npmでインストールした場合はbiomeコマンドをnpx @biomejs/biomeに置き換えてください。

# ソースファイルのフォーマット
biome format --write [ファイルまたはディレクトリ]

# リンター実行
biome lint

VSCode/VSCodium拡張

Linterは特に何も設定しなくてもbiome.jsonが読み込めていれば使えます。Formatterはコマンドパレット経由であれば使えなくはないですが、それでは非常に不便なのでデフォルトのフォーマッタをBiomeに設定します。

以下は.js.ts.jsx.tsxの4種類を対象にBiomeをデフォルトフォーマッタにする例です。

{
	"[javascript][typescript][javascriptreact][typescriptreact]": {
		"editor.defaultFormatter": "biomejs.biome"
	}
}

設定すると、通常のフォーマットと同じショートカットAlt + Shift + FのフォーマットでBiomeが使われるようになります。

トラブルシューティング

VSCode/VSCodiumで使用するBiomeのバイナリ

以下の優先順位でBiomeのバイナリが使用されます。

  • プロジェクトにインストール(./node_modules)されたバイナリ
  • "biome.lspBin"で設定されたパスのバイナリ
  • 上記どちらも存在しない場合に、拡張機能自身が自動でダウンロードするバイナリ

VSCode/VSCodiumでのフォーマット時にエラーが出る

Error when running format:
Extension 'Biome' is configured as formatter
but it cannot format '言語名'-files

このエラーの原因は色々あります。以下のパターン以外でも発生する可能性はあると思います。

  • 設定ファイルが読み込めない
  • Biome本体と拡張機能のバージョンが合わない

設定ファイルは、ひとまずプロジェクト(開いているフォルダ)のルートに作成すれば解決するので本項では触れません。フォルダのルートでbiome initすればOKです。

Biomeと拡張機能のバージョンが合わない

VSCode/VSCodium上でBiomeを検索してインストールする場合はリリースビルドが自動でインストールされます。

しかしVSIXを手動ダウンロードしてインストールする場合、Visual Studio MarketplaceやOpenVSXでは開発ビルドが一番上に表示されるため、開発ビルドが初期選択されます。そのままダウンロードすると開発ビルドがダウンロードされるため、本体とバージョンが合わない可能性があります。

Latestは開発ビルド(バージョン番号が年月日)になっているので、バージョン番号のみとなっているリリースビルドを手動で選択して導入すると直ります。

おわり

単体でも動かせる高速なツールが増えてきて、個人的には嬉しいですね。開発時には多少依存関係があっても、リリースされたものに依存関係が無いのは気持ち良いです(※個人の感想です)。

カテゴリ: 開発