Next.js に Biome を導入する

概要

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

環境

• Next.js：v14.0.3（App Router）
• Biome：v1.4.1
• Bun：v1.0.15

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.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"]
}