Zum Hauptinhalt springen
Biome – der moderne All-in-One Formatter und Linter für Webprojekte
#Biome #Linter #Formatter #Rust #ESLint

Biome – der moderne All-in-One Formatter und Linter für Webprojekte

Mit Biome steht ein neues Tool bereit, das Formatter, Linter und Typprüfung in einem System vereint – schnell, leichtgewichtig und auf moderne Entwicklerbedürfnisse zugeschnitten.

Ein gut funktionierender Linter- und Formatter-Workflow ist elementarer Bestandteil jeder stabilen Frontend-Codebasis. Werkzeuge wie Prettier und ESLint haben sich lange als Standard etabliert, bringen jedoch eine gewisse Komplexität im Setup mit – und stoßen bei wachsender Projektgröße schnell an Performancegrenzen.

Mit Biome steht ein neues Tool bereit, das Formatter, Linter und Typprüfung in einem System vereint – schnell, leichtgewichtig und auf moderne Entwicklerbedürfnisse zugeschnitten.

Was ist Biome?

Biome ist ein in Rust entwickeltes Tool, das Formatter- und Linting-Funktionalitäten in einem einzigen Paket bündelt. Es unterstützt JavaScript, TypeScript, JSX/TSX, JSON, GraphQL und CSS – mit dem erklärten Ziel, bestehende Lösungen wie Prettier und ESLint vollständig abzulösen.

Vorteile im Überblick:

  • Schnell: Bis zu 25× schneller als Prettier und 15× schneller als ESLint
  • Kompatibel: Unterstützt rund 97 % der Prettier-Formatierung
  • All-in-One: Nur eine Konfiguration (statt Prettier + ESLint getrennt)
  • Tooling: Editor-Plugins, LSP-Support, CI-Tools, Auto-Fix und Import-Sortierung

Formatierung und Linting im Detail

Biome führt beide Aufgaben – Formatieren und Linting – in einem System aus:

  • Formatter: Robuste Formatierung, auch bei nicht vollständig validem Code
  • Linter: Über 270 integrierte Regeln (basierend auf bekannten ESLint-Standards)
  • Check-Commands: format, lint, check, ci – klare Trennung, ideal für automatisierte Workflows
  • Import Management: Automatische Sortierung von Imports inklusive

CSS-Unterstützung: Noch kein Stylelint-Ersatz

Biome bietet grundlegende Unterstützung für CSS-Dateien: Syntaxformatierung und einfache Strukturregeln funktionieren zuverlässig. Ein vollständiger Ersatz für Stylelint ist aktuell jedoch nicht vorgesehen.

Aktueller Stand:

  • Formatieren: Ja (Farben, Einrückung, Klammerung etc.)
  • Linting: Ja, aber eingeschränkt – keine vollständigen Stylelint-Regeln wie BEM, Konventionen, Design Tokens
  • Empfehlung: Für anspruchsvolle CSS-Linting-Szenarien weiterhin Stylelint parallel einsetzen

Installation und Einrichtung

Biome wird per npm installiert und über eine zentrale biome.json-Datei konfiguriert:

npm install --save-dev --save-exact @biomejs/biome
npx biome init

Die Konfiguration erfolgt vollständig in biome.json:

{
  "formatter": {
    "enabled": true
  },
  "linter": {
    "rules": {
      "recommended": true
    }
  }
}

Migration von bestehenden Setups:

Biome bietet ein CLI-Tool zur Migration:

npx biome migrate prettier --write
npx biome migrate eslint --write

Editor- & CI-Integration

VS Code

  • Eigene Extension mit Format-on-Save, Quick Fixes, Import-Sortierung
  • Funktioniert auch ohne weitere Plugins zuverlässig

Neovim & andere

  • Voller LSP-Support für moderne Setups
  • Kompatibel mit Tools wie null-ls oder über CLI

Zed Editor

Zed, ein moderner, performance-orientierter Code-Editor mit Fokus auf Kollaboration und Rust-native Architektur, bietet bereits solide Unterstützung für LSP-basierte Tools. Biome lässt sich via Language Server Protocol (LSP) in Zed integrieren – Formatierung und Linting laufen performant und ohne separate Plugin-Installation.

Weitere Setups

  • Biome eignet sich hervorragend für Git Hooks (pre-commit) und CI-Checks
  • In CI/CD-Pipelines einfach per npx biome ci ./src ausführbar

Vergleich: Biome vs. Prettier + ESLint

FeaturePrettier + ESLintBiome
Geschwindigkeitlangsam bei großen Projektensehr schnell (Rust-basiert)
Konfigurationzwei Tools, mehrere Dateieneine JSON-Datei
Import-SortierungPlugin-basiertnativ
Editor-Integrationsehr gutsehr gut
CSS-Stylelint-Ersatzvollständigeingeschränkt
Pluginsgroße Auswahlnoch begrenzt

Aktuelle Nutzung und Erfahrungsstand

Biome wird bereits erfolgreich in modernen JavaScript- und TypeScript-Projekten eingesetzt. In produktionsnahen Setups läuft es aktuell parallel zu:

  • WebStorm: Biome via CLI eingebunden
  • Cursor AI: Unterstützung über integrierte Tools + Kommandozeile
  • VS Code / Neovim: über LSP oder Extension
  • Zed: bevorzugt für performante, kollaborative Arbeit – besonders im Rust-Umfeld relevant

Schlussgedanke

Biome ist ein leistungsfähiges Tool für Projekte, die Wert auf Geschwindigkeit, Konsistenz und einfache Konfiguration legen. Es ersetzt klassische Formatter/Linter-Kombinationen mit einer modernen, wartungsarmen Lösung.

Für Projekte mit großem JavaScript-/TypeScript-Anteil bietet Biome ein zukunftssicheres Fundament – besonders, wenn Build-Zeiten, Editor-Performance und CI-Konsistenz im Fokus stehen.

Empfehlung:

  • Für neue oder mittelgroße JS/TS-Projekte: uneingeschränkt empfehlenswert
  • Für CSS/SCSS-lastige Frontend-Projekte: ggf. weiterhin Stylelint ergänzend einsetzen
  • Für bestehende Setups: Migration mit Bedacht, aber lohnenswert