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

この記事は [ここのえ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/99no_exit) Day 17の記事です。

# Biomeって何？

[**Biome**](https://biomejs.dev/) は2023年9月にリリースされたばかりの **Linter** + **Formatter** みたいなツールです。公式では「Toolchain of the web」と謳っています。

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

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

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

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

https://biomejs.dev/internals/language-support/

# 導入

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

https://biomejs.dev/guides/getting-started/

```bash
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
		}
	}
}
```
:::note info
生成されたコンフィグは、**Formatter**についての記述がありませんが、デフォルトで有効なので問題はありません。
無効にしたい場合、`fomatter.enabled: false`にします[^2]。
:::

# 使い方

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

## Formatter

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

```bash
biome format --write <file or directory>
```

`biome.json` で設定を変更できます。`.prettierrc` みたいな感じです。
詳細は [**こちら**](https://biomejs.dev/reference/configuration/#formatter) から。

```biome.json
"formatter": {
  "formatWithErrors": false,
  "indentStyle": "space",
  "indentWidth": 2,
  "lineWidth": 120
}
```

## Linter

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

```bash
# Lintだけ
biome lint <file or directory>

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

こちらも`biome.json`で細かい設定ができます。
基本的に [**Recommened Rules**](https://biomejs.dev/linter/#recommended-rules) を適用しておけば問題ないと思います。

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

```biome.json
"linter": {
  "enabled": true,
  "rules": {
    "recommended": true,
    "style": {
      "noVar": "off"
    }
  }
},
```

## Check

**Linter** + **Formatter** + α です。
`import`の並び順を変えたり、未使用importを削除してくれる[**Organize Imports**](https://biomejs.dev/analyzer/)もやってくれます。

```bash
biome check --apply <file or directory>
```

Organize ImportsのON/OFF設定は `biome.json` で出来ます。
```biome.json
"organizeImports": {
  "enabled": true
},
```

# 速度比較

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

https://github.com/nonuplet/discord-rigate

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

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向けが無くて苦労することがしばしばありますが、公式で提供してくれるのはとてもありがたい……

https://biomejs.dev/guides/integrate-in-editor

# まとめ

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

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

ちなみに最近、[BiomeチームがPrettierの報奨金をゲットした](https://prettier.io/blog/2023/11/27/20k-bounty-was-claimed)話題もありました。ますます盛り上がりそうですね。

# 参考

https://biomejs.dev/

[^1]:https://biomejs.dev/blog/annoucing-biome
[^2]:https://biomejs.dev/guides/getting-started/#configuration