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