Next.js に Biome を導入する

概要

Next.jsにBiomeを導入した備忘録

環境

• Next.js：v15.2.4（App Router）
• Biome：v1.9.4
• Bun：v1.2.8

Biome とは

linter と formatter のツール
https://biomejs.dev/ja/

インストール

公式に従ってインストールする（getting-started）

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

初期化

bun biome init

設定

諸々設定する
基本的には biome.json に定義していくだけ
デフォルトの設定で割と十分だったので、ほとんど変更していません

biome.json

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

（備忘メモ）以前の設定

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "extends": [],
  "files": { "ignoreUnknown": true },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "ignore": [".next", "node_modules"],
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": true,
    "ignore": [".next", "node_modules"],
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 80
  },
  "javascript": {
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    },
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "single",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded"
    }
  },
  "json": {
    "parser": { "allowComments": true },
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 80
    }
  }
}

vscode で使いやすくするための設定
自動フォーマットとか

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": true,
    "source.organizeImports.biome": true
  }
}

.vscode/extensions.json

{
  "recommendations": ["biomejs.biome"]
}