Biome の導入 〜 設定まで

最近巷で話題の biome を ESLint と Prettier の代わりに導入してみようと思います。
導入 〜 設定までの備忘録として記事にしようと思います。
今回はReact や Next のプロジェクトが既に立ち上がってる状態を前提としています。
この記事では npm で導入していきます。

Biome とは

もともと Rome という、lint や format、build、test といった開発ツールを１つに集約することを目指したプロジェクトがありました。
この Rome の主要メンバーによってフォークされて Biome が生まれたらしいです。

Biome は JavaScript/TypeScript の 「Linter と formatter が一緒になったもの」という理解でひとまず良さそうですね。
format としては、Prettier とは 97% の互換性があり、Linter としては ESLint などから 303個のルールがあります。

インストール

早速インストールしてみましょう！
公式では node のバージョンが14.18以降が必要なようです。

npm install --save-dev --save-exact @biomejs/biome

設定

設定ファイルの生成

npx @biomejs/biome init

このコマンドで biome.jsonが生成されます。
この設定ファイルで linter や formmater の設定を行います。
初期設定では 推奨ルールが有効になってそうです。

biome.json の設定

今回はとりあえず下記のような設定にしました。
この辺は設定などを参照して自由にやっちゃっていいと思います。

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": [
      "**/node_modules/**",
      "./.next/**",
      "./coverage/**",
      "./tsconfig.json"
    ]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "single",
      "semicolons": "asNeeded",
      "trailingCommas": "none"
    }
  }
}

実行

CLIを参照し、実際に動かしてみましょう。
よく使いそうなコマンドはこんな感じです。
option の --writeで実際に書き換えてくれます。
applyもあるけど非推奨のようですね。

# format を走らせる
npx biome format --write ./src
# lint (check only) を走らせる
npx biome lint ./src
# lint fix linter を走らせる
npx biome lint --write ./src
# import, format, linter を走らせる
npx biome check --write ./src

script に追加

上記のコマンドを毎回打ってもいいですが、せっかくなので package.jsonの script に追加しました。
今回は root から biome を走らせてます。
ignore したり、biome lint ./srcのようにディレクトリ指定したりと調整すると良さそうです。

package.json

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

VSCode の拡張機能

VSCode で Biome を使用する場合は下記の拡張機能が便利です。
これでVSCode で Biome を実行できます。

Biome を実行する設定を settings.json に記載

.vscode配下のsettings.jsonに設定を記載します。
これで保存時に Biome で整形してくれます。

settings.json

{
  "editor.formatOnSave": true, // 保存時のフォーマット有効化
  "editor.codeActionsOnSave": {
    "quickfix.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 の導入と設定方法まとめ
  • こちらの方がより詳しくまとめられております。
• VSCodeでファイル保存時にBiomeを適用させる
  • 保存時に元々拡張機能として入っていた Prettier と衝突してたようなので非常に助かりました。