初めての Biome
kwn
- 出始めの話題になっていた時期から気になってはいたものの触れてなかったBiomeを使ってみる
- ESLint + Prettierの役割を一つで担ってくれてしかも高速ということで良さそうだと思っている
kwnPlaywrightの初期設定コマンドを実行しただけのプロジェクトに導入してみる。
(プロジェクトについては以下のスクラップに作成の流れが書いてある。)
基本的には2024年4月11日時点での公式ドキュメント通りにやっていくつもり。
日本語のドキュメントがあるのはありがたい。
kwnインストール
npm install --save-dev --save-exact @biomejs/biome
Biomeをインストールする際には、バージョン範囲演算子を使用しないことを強く推奨しています。詳しくは、バージョニング ページをご覧ください。
kwn設定
npx @biomejs/biome init
以下のファイルが生成された。
{
"$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は有効になっています。
kwn使い方
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コマンドがあるのは嬉しい。
両方を担ってくれるツールならではの良さな気がする。
kwnVS Code に導入
とりあえず今回はインストールしたプロジェクトにだけ設定できればいいので.vscode/settings.jsonを作成。言語関係なくdefaultFormatterにBiomeを設定し、保存時にformatを実行して修正するように設定。
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit"
}
}
フォーマッター > インデントスタイル
フォーマットを実行してみて、インデントスタイルがタブであることに気づいた。
ドキュメントに以下のように記載されていた。
Biomeがサポートする、言語に依存しないオプションは以下の通りです。
- インデントスタイル (デフォルト： tab): インデントにはスペースまたはタブを使用します
- タブ幅 (デフォルト： 2): インデントレベルごとのスペースの数です。
- 行幅 (デフォルト： 80): Biomeがコードを折り返す列幅です。
インデントスタイルをとりあえず慣れているスペースに変更しておく。
"formatter": {
"indentStyle": "space"
}
導入完了したのでこのスクラップはクローズする
現状の感想
- とりあえず導入してみただけだが簡単だった
- 設定がシンプルで分かりやすい
- 処理が速い
- やはりESLint + Prettierの役割を一つで担ってくれるのは良い
kwnBiomeのVSCode拡張機能を推奨するための.vscode/extensions.jsonを忘れていたので追加