Tooling & DX 5. Mai 2026 9 min Lesezeit

Biome mit Claude Code: Blitzschnelles Linting & Formatting 2026

Biome (ehemals Rome) ist der ESLint + Prettier Nachfolger — in einem einzigen Tool, geschrieben in Rust, bis zu 100x schneller. Claude Code kennt Biome-Konfiguration, Regel-Sets und die Migration von bestehenden ESLint/Prettier-Setups.

Biome vs. ESLint + Prettier: Der Vergleich

Kriterium	ESLint + Prettier	Biome
Format: 100k-Zeilen Projekt	~18s	~0.18s (100x)
Lint: 100k-Zeilen Projekt	~12s	~0.4s (30x)
Setup-Aufwand	Hoch (2 Tools, Plugins, Konflikte)	Minimal (1 Tool, 1 Config)
TypeScript Support	Über @typescript-eslint	Eingebaut
Import-Sorting	eslint-plugin-import	Eingebaut
Prettier-Kompatibilität	Identisch	97% kompatibel
Konfigurations-Konflikte	Häufig (ESLint vs. Prettier)	Keine (1 Tool)

Setup und Konfiguration

SetupBiome in 2 Minuten einrichten

# Prompt: "Richte Biome für unser TypeScript-Projekt ein"

# Installation:
npm install --save-dev --save-exact @biomejs/biome

# biome.json generieren (mit sinnvollen Defaults):
npx @biomejs/biome init

# Ergebnis: biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "style": {
        "useConst": "error",
        "noVar": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      }
    }
  },
  "organizeImports": { "enabled": true },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  }
}

Tägliche Nutzung: Format, Lint, Check

FormatCommands und VS Code Integration

# Format: alle Dateien
npx biome format --write .

# Lint mit Auto-Fix:
npx biome lint --write .

# Check (Format + Lint + Import-Sort in einem):
npx biome check --write .

# Einzelne Datei:
npx biome check --write src/components/Button.tsx

# CI-Modus (kein --write, schlägt fehl bei Verstößen):
npx biome ci .

# package.json scripts:
{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write .",
    "ci": "biome ci ."
  }
}

# VS Code Extension installieren:
# Extension ID: biomejs.biome

# .vscode/settings.json (Format on Save + Biome als Default Formatter):
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Migration von ESLint + Prettier

MigrationESLint/Prettier → Biome automatisch

# Prompt: "Migriere unser ESLint + Prettier Setup zu Biome"

# Biome Migration-Tool (liest .eslintrc + .prettierrc):
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

# Was migriert wird:
# ✅ Prettier-Optionen → biome.json formatter
# ✅ ESLint rules → biome.json linter rules
# ✅ .eslintignore → biome.json ignore
# ⚠️  Custom ESLint Plugins → manuell prüfen

# Danach entfernen:
npm uninstall eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm uninstall eslint-config-prettier eslint-plugin-prettier
npm uninstall eslint-plugin-react eslint-plugin-react-hooks

# Dateien löschen:
rm .eslintrc.* .prettierrc.* .prettierignore

Migration-Tipp: Biome unterstützt 97% der Prettier-Formatierung. Die 3% Abweichung betrifft Edge-Cases bei langen Ausdrücken. Claude Code kann nach der Migration einen Diff erstellen und erklären wo Biome sich von Prettier unterscheidet.

GitHub Actions CI Integration

CIBiome in GitHub Actions

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  biome:
    name: Biome Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Biome
        uses: biomejs/setup-biome@v2
        with:
          version: latest
      - name: Run Biome
        run: biome ci .
        # Schlägt fehl wenn:
        # - Formatierungsfehler vorhanden
        # - Lint-Fehler vorhanden
        # - Imports nicht sortiert

# Pre-Commit Hook mit Husky (nur geänderte Dateien):
# .husky/pre-commit
npx lint-staged

# package.json lint-staged config:
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,json}": ["biome check --write --no-errors-on-unmatched"]
  }
}

Regel-Konfiguration für TypeScript-Projekte

# Prompt: "Konfiguriere Biome optimal für ein Next.js TypeScript-Projekt"

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "linter": {
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"   // React hooks deps
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"              // console.log in Production
      },
      "performance": {
        "noAccumulatingSpread": "error"    // [...arr] in Loop = O(n²)
      },
      "a11y": {                              // Accessibility-Regeln!
        "useAltText": "error",
        "useButtonType": "error",
        "noAccessKey": "error"
      }
    }
  },
  "files": {
    "ignore": [".next", "node_modules", "dist", "*.min.js"]
  }
}

Biome Prompt-Tipp: "Analysiere unsere bestehenden ESLint-Regeln und erstelle eine äquivalente biome.json — markiere was Biome nativ kann und was wir anders lösen müssen." Claude Code erstellt eine vollständige Regel-Übersetzungstabelle.

Tooling-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Tooling-Modul mit Biome-Setup, ESLint/Prettier-Migration, CI-Integration, Pre-Commit Hooks und TypeScript-spezifischen Regel-Sets — inkl. Monorepo-Konfiguration.

14 Tage kostenlos testen →