2025.01.15

BiomeとESLintの比較と実際に使用した感想【2025年1月時点】

はじめに

みなさんはJavaScriptやTypeScriptで開発する際に、linterやformatterを使用していますか？

コードに統一感を持たせるために利用されるlinterやformatterですが、これらのツールの中でも、ESLintとPrettierは特に広く知られている一方で、最近ではBiomeも注目を集めており、その名前を耳にする機会が増えてきました。

両ツールを実際に使用した筆者が比較と現状の感想について書きました。

LinterとFormatterとは

Linterの役割と目的

Linterは、コードの品質を向上させるためのツールで、特定のルールに基づいてコードを解析します。たとえば、未使用の変数や非推奨の記法、文法エラーなどを検出し、開発者に警告を与えます。これにより、バグの発生を未然に防ぐことができ、コードの可読性や保守性を向上させることができます。

Formatterの役割と目的

Formatterは、コードの見た目を統一するためのツールで、自動的にインデントやスペース、改行の位置を調整します。例えば、複数の開発者が共同で作業する場合、Formatterを使用することでコードのスタイルが統一され、レビューやメンテナンスが容易になります。また、手動でスタイルを調整する手間が省けるため、開発の効率も向上します。

LinterとFormatterの違いと組み合わせの利点

LinterとFormatterは、それぞれ異なる目的を持つツールですが、相互補完的な役割を果たします。Linterはコードの品質やエラー検出を主な目的とし、Formatterはコードのスタイルを整えることに注力しています。この二つを組み合わせることで、コードの品質と見た目の両方を向上させることができ、開発者の生産性を高めることができます。

ESLintとは

ESLintは2013年にリリースされて以来、JavaScriptのLinterツールとして広く利用されてきました。その後、TypeScriptやフロントエンドフレームワークへの対応も進化し、業界標準的なポジションにあります。また、公式の推奨ルールセット（eslint:recommended）や、Airbnbが提供するeslint-config-airbnbのようなコミュニティ主導のルールセットが多く、柔軟かつ複雑なカスタマイズが可能です。 https://www.npmjs.com/package/eslint-config-airbnb

一方で、ルールセットやプラグインを組み合わせるためにoverrideやextendsという仕組みがあり、この仕組みがややこしいという問題もありました。この問題についてはflatconfigで解決されました。詳しくはこちらの記事で解説しました。

また、ESLintは一部formatter的な機能もあったため、Prettierと組み合わせて使うことが多いと思います。

新しいプロジェクトを開始するたびにESLintの設定を行う必要があり、そのカスタマイズ性の高さゆえに設定が煩雑になり、開発者が『設定疲れ』を感じることも少なくありませんでした。

Biomeとは

BiomeはこのようなESLintの設定疲れを解決することを目指して登場したツールです。公式では『Toolchain of the web』と謳っています。

Biomeはlinterとformatterの機能を併せ持っており、ESLintやPrettierが分担していた役割を1つのツールで実現することを目指しています。Rustで実装されており、非常に高速な動作が特徴です。現在も発展途上ありで、対応するフレームワークはこれからさらに増えていくことが期待されています。

また、Biomeは設定がシンプルで、複数のプラグインを準備する必要がないため、すぐに開発を始められることが特徴です。

ESLintとBiomeの設定方法の比較

次に、ESLintとBiomeの設定方法を見比べていきます。ここではReactとTypeScriptのプロジェクトで使用することを想定して書きます。

使用するバージョンは下記の通りです。

React: 18.3.1
TypeScript: 5.5.3
ESLint: 9.16.0
Prettier: 3.3.3
Biome: 1.9.2

ESLintの設定方法

ReactのプロジェクトにESLintを導入するにはまず次のライブラリをインストールします。

$ pnpm install eslint prettier eslint-config-prettier @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript globals typescript-eslint -D

インストールするものだけでもたくさんあります。これらのライブラリを組み合わせ、次のような設定ファイルを書きます。こちらは筆者が実際に使用している設定の一部です。必須の設定だけ載せています。

const eslint = require('@eslint/js')
const globals = require('globals')
const tsEsLintParser = require('@typescript-eslint/parser')
const tseslint = require('typescript-eslint')
const prettierConfig = require('eslint-config-prettier')
const importPlugin = require('eslint-plugin-import')

module.exports = tseslint.config(
  {
    ignores: ['node_modules', 'dist'],
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parser: tsEsLintParser,
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
  eslint.configs.recommended,
  tseslint.configs.recommendedTypeChecked,
  // prettierの設定
  prettierConfig,
  {
    // pluginごとのrulesを設定していく。ここから先は好みなので任意
    rules: {
      ..., // 省略
    },
  },
)

設定ファイルの全体はこちらで公開しています。

https://github.com/andmohiko/next-hono-monorepo/blob/main/packages/eslint-config/index.js

Biomeの設定方法

ReactのプロジェクトにBiomeを導入するにはまず次のライブラリをインストールします。

$ pnpm install @biomejs/biome -D

インストールするものは一つで済みました。設定ファイルは次のようになります。

{
  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "quoteStyle": "single",
      "trailingCommas": "all"
    }
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "files": {
    "ignore": ["node_modules/", "dist/", "dev-dist/"]
  }
}

ESLintのrulesのようにさらに細かく設定することもできます。

ESLintとBiomeの比較

それでは、両方を使った筆者がいくつかの観点で比較してみます。

※これは2025年1月時点での感想です。今後のアップデートや開拓次第で意見が変わる可能性があります。

開発の始めやすさ

設定項目の多さや煩雑さで比べると、設定方法を見てわかる通り、Biomeの方が簡単です。

一方で、ESLintを長年使い続けている人は、ESLintの設定ファイルという資産があり、秘伝のタレとして使い回すことができるため、ESLintの設定疲れをそれほど感じない場合もあります。

また、ESLintはFlat Configへの移行が面倒でBiomeに乗り換えたいという声も聞きますが、筆者自身の経験では、Flat Configへの移行は意外とスムーズに行えたため、Flat Configの存在がBiomeへ乗り換える理由にはなりませんでした。

ちなみにFlat Configへの移行方法については下記の記事で解説しています。 https://www.andmohiko.dev/blog/monorepo-eslint-flat-config

動作の軽さ

BiomeはRustで実装されており、従来のJavaScript製ツールよりも圧倒的に高速です。特にコードベースが大きくなるほど、静的解析やコード整形の速度の違いを感じられるでしょう。

また、Biomeはモノレポに対応しており、軽量なのでモノレポのルートで実行してもストレスがありません。ESLintはモノレポのルートで実行すると若干の遅さを感じる場合があります。そのため、ESLintを快適に使用するには、設定をパッケージ化して他パッケージにインストールするという手順を踏むことをおすすめします。この点についても詳しくは以下の記事で解説しています。 https://www.andmohiko.dev/blog/monorepo-eslint-flat-config

開発規模での使い分け

大規模なアプリケーション開発や、参加者の多いプロジェクトでは、より厳密なルール設定が求められることもあると思います。Biomeはまだ発展途上であり、現状ではESLintの方が複雑かつ細かい設定が可能なため、大規模プロジェクトではESLintを選びたくなると思います。特に歴史のあるプロジェクトでは、既存のESLintの設定ファイルの資産が大きく、今からBiomeに乗り換えることは少しもったいない感じがします。この点は、今後のBiomeのアップデートで特に意見が変わるところかもしれません。

フレームワークごとの使い分け

BiomeはReact, TypeScriptには対応しているため、ReactやNext.jsのプロジェクトではBiomeを使用することを検討することが増えてくるかもしれません。一方で、VueやAstroにはまだ一部対応しておらず、たとえばAstroではHTML部分のフォーマットにはまだ対応していないため、Prettierを併用する必要があります。それでも、一から設定を始める場合、BiomeとPrettierを併用する方が設定コストが低いと感じました。Astroで爆速で終わらせたいWeb制作を始めるときはBiomeを選びたいです。対応フレームワークの幅も今後のBiomeのアップデートに期待です。

さいごに

本記事では、JavaScriptやTypeScriptの開発において広く利用されているESLintと、最近注目を集めているBiomeを比較しました。

実際に両方を使った感想としては、筆者が普段関わっている開発規模だと、今はまだESLintの方を選び続けたいと感じました。今後規模の大きい開発に関わったときにはBiomeの動作の軽さをとるかもしれません。