ESLint + Prettierの代わりにBiomeを試す

この記事は ここのえ Advent Calendar 2023 Day 17の記事です。

Biomeって何？

Biome は2023年9月にリリースされたばかりの Linter + Formatter みたいなツールです。公式では「Toolchain of the web」と謳っています。

Rust製、処理が高速、Typescript, TSXの標準サポートなどが特徴です。

以前 Rome というツールがあり、そちらが開発終了となりました。
そのRome開発チームの一人が Biome を作り始めた、という流れです¹。

記事を書いている2023年11月現在、まだサポートされている言語はJavascript, Typescript, JSX, JSONで、Vueなどはまだです。

本番環境に採用するのは現時点では難しいかもしれませんが、近いうちにサポートされるでしょう。

導入

公式に丁寧なドキュメントがあります。

yarn add -D @biomejs/biome
npx @biomejs/biome init

biome.json が生成されます。特に何もしなくても、最初からLinterおよびFormatterが有効化されています。

biome.json

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

生成されたコンフィグは、Formatterについての記述がありませんが、デフォルトで有効なので問題はありません。
無効にしたい場合、fomatter.enabled: falseにします²。

使い方

使い方も非常にシンプルです。

Formatter

Prettierのようにきれいに整えてくれます。

biome format --write <file or directory>

biome.json で設定を変更できます。.prettierrc みたいな感じです。
詳細は こちら から。

biome.json

"formatter": {
  "formatWithErrors": false,
  "indentStyle": "space",
  "indentWidth": 2,
  "lineWidth": 120
}

Linter

Linterの役割をします。ESLintの代わりです。
最初からTypescriptに対応しているので、面倒なプラグイン導入の必要はありません。

# Lintだけ
biome lint <file or directory>

# Lintして問題個所をFixする
biome lint --apply <file or directory>

こちらもbiome.jsonで細かい設定ができます。
基本的に Recommened Rules を適用しておけば問題ないと思います。

必要に応じて、こんな感じでルールを無効化することもできます。

biome.json

"linter": {
  "enabled": true,
  "rules": {
    "recommended": true,
    "style": {
      "noVar": "off"
    }
  }
},

Check

Linter + Formatter + α です。
importの並び順を変えたり、未使用importを削除してくれるOrganize Importsもやってくれます。

biome check --apply <file or directory>

Organize ImportsのON/OFF設定は biome.json で出来ます。

biome.json

"organizeImports": {
  "enabled": true
},

速度比較

.vueが未対応なので、自分のnodeのスクリプトで試しました。
ちょっとしたDiscord botとRSSパーサーです。

ルールを完全一致させているわけではないので、あくまで参考程度にしてください。

ESLintは超最小構成なので怒られませんが、Biomeではガッツリ怒られる感じのコードになってます。多分Recommend Ruleが厳しめです。

計測環境はこんな感じです。

• Ubuntu (WSL2), timeで計測
• ESLint + Prettier環境
  • ESLint 8.52.0
    • extends: standard-with-typescript, prettier
  • Prettier 3.0.3
• Biome 1.3.3
  • デフォルト設定 (recommended rule)

package.json

  "scripts": {
    "espr": "eslint --fix src/**/*.ts && prettier --write src/**/*.ts",
    "biom": "biome lint --apply src && biome format --write src"
  },

環境	実行時間(time)
ESLint + Prettier	3.41s
Biome(lint & format)	0.15s

正確な比較ではありませんが、明らかに早いですね。

VSCode, IntelliJ IDE のサポート

VSCode向け、IntelliJ向けのFirst-Party Pluginがあります。
出たばかりのライブラリだとIntelliJ向けが無くて苦労することがしばしばありますが、公式で提供してくれるのはとてもありがたい……

まとめ

まだリリースされて間もないため、サポートしている言語の範囲は狭いもののかなり可能性を感じます。ESLintの初期設定でいつも消耗するので、導入してすぐ使える点もポイント高めです。あととにかく早い。速さは正義…

TypescriptオンリーなNode用のスクリプトとかは現時点でも全然いけるので、積極的に採用していこうかなーというお気持ちです。

ちなみに最近、BiomeチームがPrettierの報奨金をゲットした話題もありました。ますます盛り上がりそうですね。

参考

1. https://biomejs.dev/blog/annoucing-biome ↩

2. https://biomejs.dev/guides/getting-started/#configuration ↩