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 lintVSCode/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は開発ビルド(バージョン番号が年月日)になっているので、バージョン番号のみとなっているリリースビルドを手動で選択して導入すると直ります。
おわり
単体でも動かせる高速なツールが増えてきて、個人的には嬉しいですね。開発時には多少依存関係があっても、リリースされたものに依存関係が無いのは気持ち良いです(※個人の感想です)。
カテゴリ: 開発