Prettier、ESLintを卒業してBiomeを導入する

今回は、Biomeを導入します。

今まではPrettierとESLintを組み合わせて使用するのが一般的だったように思うのですが、Biomeはこれらのツールの機能を統合して提供しています。

インストール、設定、GitHooksあたりをまとめます。

Biomeとは

これです。

Biome

フォーマット、リントなどが一瞬で完了します！

biomejs.dev

設定を一元管理できるのが嬉しい。

所感

良かった点

設定を一元管理できる
- 設定がシンプル
- 別にルールをカスタマイズしなくても、いい感じに規制してくれる
速い

微妙？な点

ルールをカスタマイズしたい場合、実験的なものとかも割とあるイメージ

1年近く使用してますが、個人的には今のところ、そこまで不満は感じてません。

個人とか、小・中規模で普通に開発する分には十分な気がします。

導入

インストール

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

設定

実行したら、biome.jsonが生成されます。

npx @biomejs/biome init

私は、こんな感じで設定してます。

好みのフォーマット設定
TailwindCSSをよく使用するので、見栄えを良くするためにクラスをソートする設定
Git管理しているファイルに対してのみ実行する設定

{
  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "indentWidth": 4,
    "lineWidth": 120
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "fix": "safe",
          "options": {}
        }
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "single"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

お好みの設定に変更してください。

設定

biome.jsonを使用してBiomeをカスタマイズおよび設定する方法

biomejs.dev

使い方

# ./app配下に対してFormatを実行
npx @biomejs/biome format --write ./app

# ./app配下に対してLintを実行
npx @biomejs/biome lint --write ./app

# ./app配下に対してFormat、Lint、インポートの整理を実行
npx @biomejs/biome check --write ./app

VSCodeの設定

拡張機能

Biome - Visual Studio Marketplace

Extension for Visual Studio Code - Toolchain of the web

marketplace.visualstudio.com

以下をサポートしてくれます。

保存時にフォーマット
コードリファクタリング
インライン提案とクイックフィックス

settings.json

この辺の設定を入れておくと、ファイル保存時に勝手にインポート文のソートやら、フォーマットが行われます。

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.biome": "explicit" }
}

VS Code拡張機能

BiomeのVS Code拡張機能

biomejs.dev

Git Hooks

Gitのコミットやプッシュ時にフォーマットやリントを実行して、コードの品質や一貫性を維持できます。

今回はLefthookというツールを使用します。

# lefthookのインストール
npm install lefthook --save-dev

ルートにlefthook.ymlというファイルを追加する。

# コミット前にフォーマットチェックやリントを行い、安全な修正を行う
pre-commit:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
      stage_fixed: true

# プッシュ前にフォーマットとリントのチェックを行う
pre-push:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
      run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}