パッケージ追加

dev 環境のみに Biome パッケージを追加

bun add -D @biomejs/biome

初期設定

bunx @biomejs/biome init
#> biome.json が生成されていればOK

ESLint からのマイグレーション

⚠️今回の手順では未実施。必要に応じてマイグレーションすること

bunx @biomejs/biome migrate eslint --write
#> ./.eslintrc.cjs has been successfully migrated.
#> Run the command with the option --include-inspired to also migrate inspired rules.

ESLint 関連のファイル・パッケージ・設定の削除

ESLint ではなく Biome を使用するため、不要な ESLint 関連のファイル・パッケージを削除

rm .eslintrc.cjs
bun uninstall \
  eslint \
  eslint-plugin-react-hooks \
  eslint-plugin-react-refresh \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser

package.json の lint を、Biome を使用するように書き換える

-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "bunx @biomejs/biome lint ./src",

2024/08/23追記

• Biome の既定の設定では、インデントはタブが使用される
  • biome.json の設定を変更
• organizeImports を有効にしていると、VSCode でファイル保存時に import 文が壊れる問題
  • biome.json の設定を変更
  • 併せて、devcontainer.json にて VSCode の organizeImports を有効にするよう設定しておく
• 参考: コードフォーマッターとしてBiomeを使う

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
-   "enabled": true
+   "enabled": false
  },
+ "formatter": {
+   "indentStyle": "space"
+ },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

その他、細かな設定はここでは行わない。必要に応じて今後実施する