2025.02.05

Biomeを使ってフォーマットとリントを１ツールで完結させる

shio

こんにちは、しおです

最近、TypeScriptの開発の際に
Biomeというフォーマッターとリンターを兼ねているツールを利用し始めました。

今回はそのBiomeについて使い方などまとめていこうと思います！

Contents

Biomeとは
使い方
Biomeの設定ファイル
1. formatter.indentStyle
2. files.ignore
リンターのルールについて
VSCodeでの利用
CI環境での利用
所感

Biomeとは

最初にBiomeの簡単な説明ですが、
BiomeはJavaScript、TypeScriptなどのフォーマットやリントを1つで完結できるツールです。

JSやTSの開発の際は、リンターとしてESLint + フォーマッターとしてPrettier
という2つのツールを使うことが多かったかと思います。
ただ、ESLint側のルールとPrettier側のルールがかち合ってしまう、
それぞれの設定を用意しないといけない、という状況が発生することもありました。

それがBiomeを使うと1つのツールだけで完結できてしまうという優れものです。

Biomeのサイトはこちらになります。

使い方

早速ですがTypeScriptで開発する際の使い方から紹介します。
私の個人開発ではbunを利用しているため、パッケージ管理のコマンドなどはbunベースになりますが、
npm, yarn, pnpm, denoまで例があります。
参考こちら

さて、まずはインストールからです。
他のパッケージと同様にパッケージマネージャからインストールします。

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

インストールができたら設定ファイルを作成します。

bunx biome init

このコマンドでデフォルトの設定ファイルbiome.jsonが作成されます。
あとは実行するだけでOKです。

# フォーマットの実行
bunx biome format ./src

# リントの実行
bunx biome lint ./src

また check でフォーマットとリントの両方を実行できます。

bunx check ./src

オプションで--writeを指定すると、自動で修正もしてくれます。

bunx check --write ./src

ここまでで基本的な準備はOKです。

さらに自分はpackage.jsonにスクリプトを追加してサクッと走らせることができるようにしています。

  "scripts": {
    ...
    "format": "bunx biome format --write ./src",
    "lint": "bunx biome lint --write ./src",
    "check": "bunx biome check --write ./src",
    ...
  }

Biomeの設定ファイル

initのコマンドで初期設定の設定ファイルが生成されたと思います。

もし既にESLint + Prettierで開発していた場合は、それと同じ設定にしたいという思いになりますが、
なんとmigrateコマンドを使ってBiomeの設定ファイルにマッピングしてくれるんです！
既存の.prettierrc.jsonや.eslintrc.jsonなどを読み込んでBiomeの設定に移行してくれます。

もちろん、migrateの必要がなければ実施不要です。

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

詳細はこちらを参照ください。

さてここから、設定ファイルを確認していこうと思うのですが、
設定項目の数が膨大なため、個人的によく変更する項目をピックアップします。

formatter.indentStyle

インデントのスタイルに関する設定です。
Biomeではデフォルトが "tab" になるようなので、好みに合わせて spaceに変更しています。

{
  "formatter": {
    "indentStyle": "space"
  }
}

files.ignore

これは除外ファイルの設定になります。
自動生成したコードなど、リンターにかけたくないものがあれば適宜追加します。

例えば、下記のような感じです。

{
  "files": {
    "ignore": ["*.generated.ts", "hoge.ts"]
  }
}

設定ファイルの全容は下記のような感じにしています。

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

その他の設定についてはデフォルトで利用することが多いですが、特に違和感なく使えています。
設定の詳細はこちらにまとまっているので、好みに合わせてカスタムできます。