Biomeではじめる快適な開発環境〜設定不要の高速Linter＆Formatter〜

はじめに
- Biomeとは
導入方法
使い方
まとめ

はじめに

こんにちは、TIMELINE 開発部 Service Development をしているhondです！
普段からLinterやFormatterにはとてもお世話になっているのですが、いざ導入するとなると細かい設定などめんどくさいな、と友人に相談したらほぼ設定いらずかつ爆速なBiomeというツールを教えてもらったので触ってみた感想について紹介しようと思います！

Biomeとは

Web開発のためのたった1つのツールチェーンフォーマット、リントなどが一瞬で完了します！ Prettierのようにコードをフォーマット、しかも高速 Biomeは JavaScript、TypeScript、JSX、JSON、CSS そして GraphQL のための高速なフォーマッタであり、Prettier と97%の互換性を持ち、CIと開発者の時間を節約します。問題を修正し、ベストプラクティスを学ぶ Biomeは JavaScript、TypeScript、JSX、CSS そして GraphQL のための高性能なリンタであり、ESLint、typescript-eslint、その他のソースに由来する 200以上のルールを備えています。

https://biomejs.dev/ja/

Biomeについて公式サイトのトップでは上記のようにformatやlintが一瞬で完了することや豊富なルールが紹介されています。
新規導入の際には会社の秘伝のタレ化したものやネットのベストプラクティスを紐解いて対象のルールの比較検討を行っていましたが、Biomeを用いると推奨のルールが設定されているためこれらの作業を省くことができます！
新規導入だけでなく既存でeslint,prettierの設定がある場合は後述するコマンドを用いることでそれらの設定を引き継いだ上で一瞬で移行することが可能です。

Biomeのサポートされている言語一覧は下記になります。

✅: 対応済み 🚫: 進行中ではない ⌛️: 進行中 ⚠️: 一部サポート（いくつかの注意点あり）

Language	Parsing	Formatting	Linting
JavaScript	✅	✅	✅
TypeScript	✅	✅	✅
JSX	✅	✅	✅
TSX	✅	✅	✅
JSON	✅	✅	✅
JSONC	✅	✅	✅
HTML	⌛️	⌛️	🚫
Vue	⚠️	⚠️	⚠️
Svelte	⚠️	⚠️	⚠️
Astro	⚠️	⚠️	⚠️
CSS	✅️	✅️	✅️
YAML	⌛️	🚫	🚫
GraphQL	✅️	✅️	✅️
Markdown	⌛️	🚫	🚫

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

導入方法

インストールに関してはNode.js v14.18以降の環境で下記コマンドを実行することで完了します。

yarn add --dev --exact @biomejs/biome

インストールに関しては先ほどのコマンドのみで可能ですが、プロジェクトごとの設定を行うために下記コマンドを実行して設定ファイルを作成します。

yarn biome init

作成された設定ファイルはこちらになります

{
    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
    "vcs": {
        "enabled": false,
        "clientKind": "git",
        "useIgnoreFile": false
    },
    "files": {
        "ignoreUnknown": false,
        "ignore": []
    },
    "formatter": {
        "enabled": true,
        "indentStyle": "tab"
    },
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    },
    "javascript": {
        "formatter": {
            "quoteStyle": "double"
        }
    }
}

新規の導入に関してはこれにて完了です。既にeslintやprettierが導入されている場合は下記のコマンドを実行することで移行ができます。.eslintrc.json, .eslintignoreや.prettierrc.jsを参照して移行してくれます！
Flat Config対応された設定ファイルも移行可能です。

biome migrate eslint --write
biome migrate prettier --write

手動で設定する際にはESLintとBiomeのルール名は命名規則が異なるのでこちらのページを参考に行う必要があります。
また、CIやLeftHook、pre-commitをはじめとしたGit Hooksへの導入の仕方も公式サイトでは紹介されています。

使い方

Biomeには既に紹介したinitとmigrateを含め14個のコマンドが存在しますがここではよく使用するlint,format,checkについて説明します。

lint

biome lint ${destination}

Linterを実行するコマンドになります。デフォルトではBiomeの推奨のルールが実行されます。推奨のルールはこちらのサイトから確認することができます。執筆時点では約100のルールが推奨ルールとして設定されていました。
コードのセマンティクスを変更しないことが保証されているものをレビューなしに適応する--writeやセマンティクスを変更する可能性がある変更を手動でレビューする--write --unsafe、--writeのaliasとして--fixがオプションとしてあります。
ESLintの修正で--fixを使っていたので使い慣れたオプションがそのまま準備されているのは個人的に嬉しいポイントでした。

format

biome format ${destination}

Formatterを実行するコマンドになります。前述した通りPrettierからの移行が可能ですがあくまでPrettierと近い哲学をもつBiome独自のFormatterになります。デフォルトではindentStyleSection、indentWidthSection、lineEndingSection、lineWidthが設定されています。indentStyleSectionはインデントのスタイルをtab、indentWidthSectionはインデントサイズを2、lineEndingSectionは改行を\n、lineWidthSectionは一行当たりの最大文字数を80にそれぞれ設定しています。
formatはlint同様に--writeなどのオプションがあります。

check

biome check ${destination}

FormatterとLinterに加えimportのソートを行うコマンドになります。importは自然順にソートされます。

設定ファイル

Biomeはオプショナルの機能として設定ファイルを提供しています。ここではおすすめの設定についてピックアップして説明していきます。

複数の設定ファイル

Biomeは複数の設定ファイルを作成することが可能です。複数の設定ファイルがある場合実行時に作業ディレクトリから最も近い設定ファイルが参照されます。
そのため、モノレポなどでバックエンドとフロントエンドそれぞれに設定ファイルを作成することで独立した設定をすることが可能です。

extends

次に設定の共有についてです。extendsを用いることでextendsリストに含まれるファイルかのオプションを適用することが可能です。
例えば下記のように実装することでbiome.jsonでもbiome.base.jsonでlinterを有効化し推奨設定をしているオプション適用できます。

biome.base.json

{
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    }
}

biome.json

{
  "extends": ["./biome.base.json"]
}

vcs

VCS(バージョン管理システム)に関する設定です。
下記の例ではVCSをgitとして有効化し、変更ファイルの評価元としてプロジェクトの作業ブランチ(develop)を指定しています。このように設定することでdevelopから生やした作業ブランチでの差分をBiome実行時の対象とすることが可能です。

{
    "vcs": {
        "enabled": false,
        "clientKind": "git",
        "defaultBranch": "develop"
    }
}

まとめ

新規導入だけでなく既にESLintやPrettierが導入されている場合でもコマンドを用いて簡単に移行できる点が、重い腰を上げる後押しをしてくれるのでとても良いなと感じました。
実行速度に関しても紹介されている通り高速で弊社のプロダクトに導入してみたところ下記図のようにlintに関しては既存のESLintと比較して約20倍、formatに関しては既存のPrettierの約10倍のスピードが出ました！
既存のプロダクトではパフォーマンスの観点で、新規プロダクトではスピード感を求める中で細かい設定を行わないで済むという点で十分導入を検討する価値のあるツールだと感じました。

name	before	after
Lint	6.37s	0.34s
Format	4.56s	0.44s

every Tech Blog

株式会社エブリーのTech Blogです。