VSCode+NodeプロジェクトにBiome導入してみた

はじめに

自分はReactのプログラムを書くことが多いのですが、今まではフォーマッターにPrettier、リンターにESLintを使っていました。
ただ、どっちも似たことをしているのに別々で設定しないといけないのは面倒だなーと感じていました。
そんなことを思っていた時に、Biomeというのを入れるだけでフォーマットもリントもやってくれるらしいぞというのを聞いたので、実際に試してみました。

前提

今回は以下の環境で実行しています。

• node：24.18.0
• pnpm：11.17.0

目次

1. Biomeとは
2. NodeプロジェクトへBiomeを追加する
3. Biomeの設定を追加する
4. VSCodeを設定する
5. コマンドで確認する
まとめ

1. Biomeとは

Biome は JavaScript や TypeScript、JSON、CSS などを対象に、フォーマットとLintを実行できるツールです。色々なパッケージをインストールするのではなく、まずは Biome だけで整形と静的解析を始められるのが便利です。

2. NodeプロジェクトへBiomeを追加する

対象プロジェクトのルートで、Biomeを開発用依存関係として追加します。-E を付けると、導入したBiomeのバージョンを固定できます。（バージョンを固定する理由については公式サイトを参照）

pnpm add -D -E @biomejs/biome

次に、設定ファイルを生成します。

pnpm exec biome init

実行すると、プロジェクトのルートに biome.json が作成されます。

3. Biomeの設定を追加する

生成された biome.json に、設定を記述します。
設定値は色々と細かく指定することができますが、簡単な例を以下に載せておきます。

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "files": {
    "includes": ["src/**/*.{ts,tsx}"],
  },
  "formatter": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended"
    }
  }
}

files.ignoreUnknown を true にすると、Biomeが対応していないファイルをエラーにせずに無視できます。Node.js プロジェクトには設定ファイルやドキュメントなど様々なファイルが置かれるため、最初はこの設定を入れておくと扱いやすいです。

formatter は記述しなくてもデフォルトで true となり、Biome側のデフォルトルールが適用されます。デフォルトルールは現時点では以下のような挙動です。

• タブでインデント（幅は2）
• 1行は80文字を目安に改行
• 文末にセミコロンを付ける
• 複数行の末尾カンマを付ける
• アロー関数の引数を括弧で囲む

linter.rules.preset に recommended を指定すると、Biomeが推奨するLintルールセットを有効にできます。（何も記述しなかった場合も同じ結果になります。）ルールがプロジェクトに合わない場合は、実際に指摘を確認しながら個別に調整していくのがよいと思います。

4. VSCodeを設定する

VSCodeの拡張機能から、公式の「Biome」をインストールします。拡張機能IDは biomejs.biome です。

続けて、ワークスペースの .vscode/settings.json に以下を追加します。（一例です。）
.vscode に記述しておくことで、チーム内で VSCode の設定を共有することができます。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

これで対象ファイルを保存したときに、Biomeが自動でフォーマットしてくれます。

また、editor.codeActionsOnSave を記述することでコード保存時の動作を細かく設定することができます。
source.fixAll.biome で安全に自動修正できるLintエラーを修正するようにし、source.organizeImports.biome で未使用importを削除し、importを整理するようにしています。

5. コマンドで確認する

package.json の scripts に、チェック用コマンドを追加します。

{
  "scripts": {
    "lint": "biome check ."
  }
}

以下のコマンドで、フォーマット・Lint・importの整理が必要な箇所を確認できます。

pnpm lint

自動修正も行いたい場合は、--write を付けます。

pnpm exec biome check . --write

--write はファイルを書き換えるため、変更内容を確認してからGitにコミットする運用にしておくと安心です。

まとめ

Biomeを導入すると、Node.js プロジェクトのフォーマットとLintをシンプルに始められました。VSCodeの保存時フォーマットも設定しておけば、手動で整形コマンドを実行する機会が減ってコードスタイルをそろえやすくなります。また、git hook を使ってコミットやプッシュ時に自動でコード成型されるようにしておくのも有効ですね。
まずは推奨ルールで動かし、チームやプロジェクトの方針に合わせて biome.json のルールを少しずつ調整していこうと思います。