Biome mit Claude Code: Faster TypeScript Formatter & Linter 2026

Inhaltsverzeichnis

Biome Setup & Grundkonfiguration
biome.json Konfiguration im Detail
Linting-Regeln & Diagnostics
CI/CD & Pre-commit Integration
Migration von ESLint + Prettier
VS Code Extension & Developer Experience

Wer TypeScript-Projekte entwickelt, kennt das Problem: zwei separate Tools (ESLint für Linting, Prettier für Formatierung), teils konkurrierende Regeln, komplexe Konfigurationsdateien und langsame CI-Durchläufe. Biome löst das mit einem einzigen, Rust-basierten Werkzeug — und ist dabei zehnmal schneller als Prettier.

In diesem Guide zeigen wir, wie du Biome in einem modernen TypeScript-Projekt aufsetzt, konfigurierst und mit Claude Code automatisiert einsetzt. Claude Code übernimmt dabei die Migration, generiert Konfigurationen und integriert Biome nahtlos in dein CI/CD-Setup.

    Warum Biome 2026? Das Projekt hat die 1.0-Ära hinter sich gelassen und ist heute die erste Wahl für alle, die auf Performance und Simplizität setzen. Mit Biome 1.9+ ist die ESLint-Kompatibilität auf über 97% gestiegen — eine Migration lohnt sich jetzt mehr denn je.
  

1. Biome Setup & Grundkonfiguration

Biome ist ein Drop-in-Ersatz für das ESLint + Prettier Duo. Die Installation dauert weniger als eine Minute — danach hat dein Projekt einen einheitlichen Code-Stil und aussagekräftige Linting-Fehler.

Installation

Biome wird als DevDependency installiert. Es gibt kein globales CLI-Paket, das du pflegen müsstest:

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

# pnpm
pnpm add -D @biomejs/biome

# yarn
yarn add -D @biomejs/biome

# bun
bun add -d @biomejs/biome

Nach der Installation initialisierst du Biome mit dem eingebauten init-Befehl. Dieser erstellt eine minimale biome.json im Projekt-Root:

npx @biomejs/biome init

Das Ergebnis ist eine biome.json mit sinnvollen Standardwerten:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true
  }
}

Grundlegende CLI-Befehle

Formatter

# Formatierung prüfen
npx biome format .

# Formatierung anwenden
npx biome format --write .

Linter

# Lint-Check
npx biome lint .

# Auto-Fix
npx biome lint --apply .

Kombiniert

# Format + Lint + Import-Sortierung in einem Durchgang
npx biome check --apply .

# Nur geänderte Dateien prüfen (ideal für CI)
npx biome check --changed --since=main .

package.json Scripts

Füge diese Scripts in deine package.json ein — Claude Code erkennt sie automatisch und nutzt sie bei Code-Reviews:

{
  "scripts": {
    "lint": "biome lint .",
    "lint:fix": "biome lint --apply .",
    "format": "biome format --write .",
    "format:check": "biome format .",
    "check": "biome check .",
    "check:fix": "biome check --apply ."
  }
}

Claude Code Tipp: Wenn du Claude Code mit Biome verwendest, erkennt der Agent automatisch deine biome.json und respektiert deine Formatierungsregeln beim Generieren von Code. Kein manuelles Nachformatieren mehr — Claude liefert direkt konformen Code.

Erste Verwendung — Struktur eines TypeScript-Projekts

my-project/
├── biome.json           ← Biome-Konfiguration
├── tsconfig.json
├── package.json
├── src/
│   ├── index.ts
│   └── utils/
│       └── helpers.ts
└── tests/
    └── helpers.test.ts

Biome arbeitet direkt mit TypeScript-Dateien — kein zusätzlicher Parser, kein Plugin-System. Das Tool versteht TypeScript nativ, was es so schnell macht.

2. biome.json Konfiguration im Detail

Die biome.json ist deine zentrale Steuerdatei. Hier legst du Formatierstil, Linting-Intensität und Ausnahmen fest — alles an einem Ort, kein Split über .eslintrc, .prettierrc und weitere Dateien.

Vollständige Konfiguration für TypeScript-Projekte

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",

  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",    // "tab" oder "space"
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 100,
    "attributePosition": "auto"
  },

  "javascript": {
    "formatter": {
      "jsxSingleQuote": false,
      "quoteStyle": "double",
      "trailingCommas": "all",   // "all" | "es5" | "none"
      "semicolons": "always",       // "always" | "asNeeded"
      "arrowParentheses": "always", // "always" | "asNeeded"
      "bracketSameLine": false,
      "bracketSpacing": true,
      "quoteProperties": "asNeeded"
    },
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    }
  },

  "organizeImports": {
    "enabled": true
  },

  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExtraBooleanCast": "error",
        "noForEach": "warn",
        "noUselessConstructor": "error",
        "useArrowFunction": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn",
        "noDoubleEquals": "error"
      },
      "style": {
        "useConst": "error",
        "useTemplate": "error",
        "noNonNullAssertion": "warn"
      }
    }
  },

  "files": {
    "ignore": [
      "node_modules",
      "dist",
      "build",
      ".next",
      "coverage",
      "*.min.js",
      "*.d.ts",
      ".turbo"
    ],
    "ignoreUnknown": true
  }
}

Formatter-Optionen im Überblick

Option	Werte	Empfehlung
indentStyle	space / tab	space (Standard)
indentWidth	1–8	2 (JS-Konvention)
lineWidth	60–320	80–120
quoteStyle	double / single	double (Google Style)
trailingCommas	all / es5 / none	all (Git-Diffs sauberer)
semicolons	always / asNeeded	always
arrowParentheses	always / asNeeded	always

Override-Konfigurationen für bestimmte Dateitypen

Biome unterstützt dateitypspezifische Overrides — nützlich wenn du z.B. für Test-Dateien andere Regeln haben möchtest:

{
  "overrides": [
    {
      "include": ["*.test.ts", "*.spec.ts", "tests/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noConsoleLog": "off"  // console.log in Tests erlaubt
          }
        }
      }
    },
    {
      "include": ["scripts/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    }
  ]
}

Claude Code Tipp: Wenn du Claude Code bittest, eine neue Konfiguration zu erstellen, gib deinen bisherigen Prettier-Stil als Kontext mit: "Ich nutze 2 Spaces, Double Quotes, kein Semikolon — erstelle die biome.json". Claude generiert dann eine passende Konfiguration ohne manuelles Mapping.

3. Linting-Regeln & Diagnostics

Biomes Linter ist kein ESLint-Klon — er ist schneller, opinionierter und liefert Fehlermeldungen mit konkreten Fix-Vorschlägen. Verstehe die Regelstruktur, um das Beste aus ihm herauszuholen.

Regelkategorien

Biome organisiert seine Regeln in Kategorien. Jede Kategorie hat einen Schwerpunkt:

complexity

Code-Komplexität reduzieren: unnötige Schleifen, redundante Casts, überflüssige Konstruktoren

correctness

Fehler verhindern: ungültige RegEx, falsche Switch-Cases, undeclared Variablen

suspicious

Verdächtiger Code: any, ==, console.log, doppelte Keys

style

Konsistenter Stil: const statt let, Template-Strings, Self-Closing

performance

Performance-Probleme: ineffiziente Schleifen, unnötige Re-Renders (React-Regeln)

nursery

Experimentelle Regeln: neueste Prüfungen, noch nicht stabil, opt-in

a11y

Accessibility: ARIA-Labels, Alt-Texte, Tastaturnavigation für JSX/TSX

security

Sicherheit: dangerouslySetInnerHTML, unsichere Refs

Recommended-Regeln aktivieren und anpassen

{
  "linter": {
    "rules": {
      "recommended": true,   // ~200 getestete Regeln aktivieren

      // Spezifische Regeln überschreiben
      "complexity": {
        "noForEach": "off",                 // .forEach() erlauben
        "useLiteralKeys": "error",
        "useOptionalChain": "error",
        "noExcessiveCognitiveComplexity": {
          "level": "warn",
          "options": { "maxAllowedComplexity": 15 }
        }
      },

      "suspicious": {
        "noExplicitAny": "warn",         // error wäre zu strikt für Legacy
        "noArrayIndexKey": "warn",       // React: key={index} vermeiden
        "noConsoleLog": "warn"
      },

      "style": {
        "useConst": "error",
        "useTemplate": "error",
        "useShorthandArrayType": "error",  // T[] statt Array<T>
        "useNamingConvention": {
          "level": "error",
          "options": {
            "strictCase": false,
            "conventions": [
              { "selector": { "kind": "interface" }, "formats": ["PascalCase"] },
              { "selector": { "kind": "typeAlias" }, "formats": ["PascalCase"] }
            ]
          }
        }
      },

      // Nursery-Regeln (opt-in, experimentell)
      "nursery": {
        "useSortedClasses": "warn",         // Tailwind: CSS-Klassen sortieren
        "noUndeclaredDependencies": "error"  // Import ohne package.json-Eintrag
      }
    }
  }
}

Suppressionen — Regeln gezielt deaktivieren

Manchmal musst du eine Regel für eine einzelne Zeile unterdrücken. Biome nutzt dafür eigene Kommentare:

// biome-ignore lint/suspicious/noExplicitAny: Legacy API erwartet any
const response: any = await legacyApi.fetch();

// Mehrere Regeln auf einmal supprimieren:
// biome-ignore lint/suspicious/noExplicitAny lint/style/useConst: Migration pending
let data: any = {};

// Für einen ganzen Block: Datei-Level-Suppression in biome.json "ignore"

Achtung: Biome erzwingt, dass Suppressions einen Kommentar-Grund haben. Ein // biome-ignore ohne Erklärung ist ein Lint-Fehler. Das hält das Team ehrlich.

Diagnostics verstehen

Biomes Fehlermeldungen sind präzise und zeigen direkt, wie der Fix aussieht:

src/utils/helpers.ts:12:5 lint/style/useConst ━━━━━━━━━━━━━━━━━━

  ✖ Diese Variable sollte const anstatt let sein.

    10 │ function processUser(id: string) {
    11 │   const prefix = "user_";
  > 12 │   let result = prefix + id;
       │   ^^^
    13 │   return result;
    14 │ }

  ℹ Sichere Korrektur: Ersetze let mit const.

  ℹ Anwenden mit `biome lint --apply`

4. CI/CD & Pre-commit Integration

Biome glänzt in automatisierten Pipelines. Ein einziger Befehl prüft Formatierung, Linting und Import-Reihenfolge — und das in Sekunden, nicht Minuten.

Pre-commit Hooks mit Husky + lint-staged

Husky und lint-staged installieren
npm install --save-dev husky lint-staged npx husky init
.husky/pre-commit konfigurieren
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npx lint-staged
lint-staged in package.json konfigurieren
{ "lint-staged": { "*.{ts,tsx,js,jsx,json}": [ "biome check --apply --no-errors-on-unmatched" ] } }

Warum --no-errors-on-unmatched? Dieser Flag verhindert, dass Biome abbricht, wenn lint-staged nur eine Teilmenge der Dateien übergibt. Ohne ihn würde ein leeres File-Set als Fehler gewertet.

GitHub Actions Workflow

# .github/workflows/biome.yml
name: Biome Check

on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]

jobs:
  biome:
    name: Lint & Format
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0   # Für --changed --since=main nötig

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run Biome
        run: npx biome ci .

      # Alternativ: Nur geänderte Dateien prüfen (schneller)
      - name: Run Biome (changed files only)
        run: npx biome check --changed --since=origin/main .

Der Unterschied zwischen biome check und biome ci

Befehl	Verhalten	Einsatz
biome check .	Prüft, schlägt fixes vor, Exit Code 1 bei Problemen	Lokale Entwicklung
biome check --apply .	Prüft und wendet sichere Fixes automatisch an	Pre-commit Hook
biome ci .	Keine Fixes, kein Caching, Exit Code 1 bei Problemen	CI-Pipelines
biome check --changed	Nur geänderte Dateien seit Branch-Abzweig	PR-Checks (schnell)

Monorepo-Setup mit Biome

In Monorepos kannst du eine Root-biome.json verwenden und in Packages überschreiben:

# packages/web/biome.json — Erbt von Root und überschreibt
{
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "a11y": {
        "recommended": true  // Nur im Web-Package: Accessibility-Regeln
      }
    }
  }
}

# turbo.json — Biome in Turborepo-Pipeline einbetten
{
  "pipeline": {
    "lint": {
      "outputs": [],
      "cache": false
    }
  }
}

5. Migration von ESLint + Prettier

Die Migration klingt nach Arbeit, ist aber mit den eingebauten Migrationsbefehlen und Claude Code-Unterstützung oft in unter einer Stunde erledigt.

Automatische Migration mit biome migrate

# Schritt 1: Prettier-Konfiguration migrieren
npx @biomejs/biome migrate prettier --write

# Schritt 2: ESLint-Konfiguration migrieren
npx @biomejs/biome migrate eslint --write

# Schritt 3: Ergebnis prüfen
npx biome check .

Biome liest deine bestehenden .prettierrc, .eslintrc-Dateien und konvertiert sie in die biome.json-Syntax. Nicht alle Regeln haben ein 1:1-Äquivalent — Biome listet diese als Warnungen auf.

Konfigurationsmapping: ESLint → Biome

ESLint-Regel	Biome-Äquivalent	Status
no-unused-vars	correctness/noUnusedVariables	✅ vollständig
prefer-const	style/useConst	✅ vollständig
no-console	suspicious/noConsoleLog	✅ vollständig
eqeqeq	suspicious/noDoubleEquals	✅ vollständig
@typescript-eslint/no-explicit-any	suspicious/noExplicitAny	✅ vollständig
import/order	organizeImports	✅ eingebaut
react-hooks/rules-of-hooks	correctness/useHookAtTopLevel	✅ vollständig
no-restricted-imports	⚠️ nursery in Arbeit	⚠️ experimentell
import/no-cycle	❌ noch nicht verfügbar	❌ Workaround nötig
unicorn/no-array-for-each	complexity/noForEach	✅ vollständig

Prettier-Konfigurationsmapping

.prettierrc Option	biome.json Äquivalent
printWidth: 80	formatter.lineWidth: 80
tabWidth: 2	formatter.indentWidth: 2
useTabs: false	formatter.indentStyle: "space"
singleQuote: true	javascript.formatter.quoteStyle: "single"
trailingComma: "es5"	javascript.formatter.trailingCommas: "es5"
semi: false	javascript.formatter.semicolons: "asNeeded"
endOfLine: "lf"	formatter.lineEnding: "lf"

Edge Cases bei der Migration

Häufige Probleme und Lösungen

1. eslint-disable-Kommentare

Biome versteht eslint-disable-Kommentare nicht. Konvertiere sie zu biome-ignore:

// Vorher (ESLint):
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const data: any = {};

// Nachher (Biome):
// biome-ignore lint/suspicious/noExplicitAny: Legacy-Typen vom Backend
const data: any = {};

2. Prettier-Plugins

Prettier-Plugins (z.B. prettier-plugin-tailwindcss) haben in Biome kein direktes Äquivalent. Für Tailwind-Sortierung: nursery/useSortedClasses als Linting-Regel nutzen.

3. .eslintignore konvertieren

# .eslintignore
node_modules
dist
**/*.generated.ts

# → biome.json "files.ignore"
{
  "files": {
    "ignore": ["node_modules", "dist", "**/*.generated.ts"]
  }
}

Mit Claude Code migrieren

Claude Code kann die Migration vollständig übernehmen. Ein effektiver Prompt:

// Prompt für Claude Code:
"Analysiere meine .eslintrc.js und .prettierrc.json und erstelle eine optimale biome.json.
Beachte alle benutzerdefinierten Regeln, markiere Regeln ohne Biome-Äquivalent als Kommentar
und schlage nursery-Alternativen vor. Prüfe danach mit 'biome check .' ob es Fehler gibt."

6. VS Code Extension & Developer Experience

Die Biome VS Code Extension ist das i-Tüpfelchen. Kombiniert mit Claude Code bekommst du ein Tooling-Setup, das schneller reagiert als jedes ESLint+Prettier-Setup der Vergangenheit.

Extension installieren und konfigurieren

Installiere die offizielle Extension:

# Via VS Code Marketplace
ext install biomejs.biome

# Oder via CLI:
code --install-extension biomejs.biome

Füge diese Einstellungen in deine .vscode/settings.json ein:

{
  // Biome als Standard-Formatter setzen
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

  // Nur für TypeScript/JavaScript Biome nutzen:
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },

  // Prettier deaktivieren (vermeidet Konflikte)
  "prettier.enable": false
}

Als Team-Empfehlung in .vscode/extensions.json:

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

Performance-Benchmark: Biome vs. Prettier vs. ESLint

Benchmark: 1.000 TypeScript-Dateien formatieren

Tool	Zeit	Relativ zu Biome	CPU-Kerne
Biome	0.3s	1x (Basis)	Multi-threaded
Prettier	3.0s	10x langsamer	Single-threaded
ESLint (ohne TS)	1.8s	6x langsamer	Single-threaded
ESLint + TypeScript	8.5s	28x langsamer	Single-threaded

Benchmark auf M2 MacBook Pro, 50.000 Zeilen TypeScript. Zahlen variieren je nach Projekt und Hardware.

Der Geschwindigkeitsunterschied kommt von Biomes Rust-Implementierung und dem Multi-Threading-Ansatz. Prettier ist Single-threaded und Node.js-basiert — bei großen Codebases wird der Unterschied noch deutlicher.

Biome in Claude Code — Das perfekte Duo

Claude Code und Biome ergänzen sich ideal:

Claude generiert konformen Code: Claude liest deine biome.json und generiert Code, der direkt konform ist — keine nachträgliche Formatierung nötig.
Auto-Fix nach Generierung: Wenn Claude eine Datei bearbeitet, läuft biome check --apply automatisch (bei korrekt konfigurierten Hooks).
Schnelles Feedback: Biomes Sub-Sekunden-Geschwindigkeit bedeutet, dass Claude Code sofort Feedback bekommt und Korrekturen im selben Turn vornehmen kann.
Konsistenz im Team: Alle Claude Code Agents im Team nutzen dieselbe biome.json — Formatierungsdiskussionen entfallen.
CI-Gates: biome ci als Pipeline-Step blockiert non-konformen Code — auch Code von KI-Agents.

Empfohlenes Workflow-Setup 2026

1. biome.json definieren (einmalig mit Claude Code Hilfe)
2. VS Code Extension + .vscode/settings.json → FormatOnSave aktiv
3. Husky + lint-staged → Pre-commit Check
4. GitHub Actions biome.yml → CI-Gate
5. Claude Code nutzt biome.json als Kontext für Code-Generierung

# Ergebnis:
✓ Kein manuelles Formatieren
✓ Kein "My code vs. CI code" Problem
✓ Claude-generierter Code direkt konform
✓ CI in Sekunden statt Minuten

Troubleshooting — Häufige Probleme

Bekannte Stolpersteine

Extension erkennt biome.json nicht

Stelle sicher, dass VS Code im Projekt-Root geöffnet ist (nicht in einem Unterordner). Biome sucht die Konfiguration relativ zum Workspace-Root.

Konflikte mit ESLint Extension

Deaktiviere die ESLint-Extension im Workspace (nicht global), wenn du auf Biome migriert hast:

// .vscode/settings.json
{
  "eslint.enable": false
}

JSON-Dateien werden nicht formatiert

Stelle sicher, dass [json] explizit auf Biome als defaultFormatter gesetzt ist. VS Code verwendet sonst seinen eingebauten JSON-Formatter.

biome ci schlägt in CI fehl, lokal nicht

Prüfe die Node.js-Version. Biome sollte über das in package.json gelistete @biomejs/biome Paket aufgerufen werden — kein globales Binary, das in CI möglicherweise eine andere Version hat.

Fazit: Warum Biome 2026 die richtige Wahl ist

Biome hat in 2026 den Reifegrad erreicht, der ihn für den produktiven Einsatz empfiehlt. Die Kombination aus:

Rust-Geschwindigkeit (10x schneller als Prettier)
Einer einzigen Konfigurationsdatei statt drei
Über 97% ESLint-Kompatibilität
Nativer TypeScript-Unterstützung ohne Plugin
Hervorragender Claude Code Integration

...macht Biome zum überzeugenden Standard für neue TypeScript-Projekte und lohnenden Migrationsschritt für bestehende. Fang klein an: Ersetze Prettier zuerst, dann ESLint. Claude Code hilft dir dabei, die Migration sicher und schnell durchzuführen.

Tooling-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Tooling-Modul mit Biome, CI/CD-Integration, Migration-Guide und Performance-Tuning für TypeScript-Projekte.

14 Tage kostenlos testen →