JavaScript-Static-Analyse mit ESLint und Biome

Wenn Sie schon eine Weile mit JavaScript arbeiten, haben Sie wahrscheinlich schon von ESLint gehört – dem bevorzugten Tool für die statische Analyse von JavaScript-Code. Aber kennen Sie Biome? Der aufstrebende Konkurrent von Prettier für die Code-Formatierung sorgt im JavaScript-Ökosystem für Aufsehen. Biome geht über die Code-Formatierung hinaus und bietet einen Linter zur Prüfung der Codequalität. Damit ist es eine Alternative zu ESLint.

Zunächst eine kurze Einführung in Code-Formatierung und -Qualität als Tools und wichtige Aspekte für JavaScript-Entwickler. Wie Sie sich denken können, ist es für den Erfolg jedes Softwareprojekts hilfreich, die Codequalität aufrechtzuerhalten und die geltenden Konventionen zur Code-Formatierung einzuhalten – insbesondere bei der Zusammenarbeit im Team.

Bei der Codequalität geht es darum, wie sich der Code zur Laufzeit verhält. Hochwertiger Code ist effizient, leicht verständlich und fehlerfrei. Die Code-Formatierung hingegen, die zum Code-Stil gehört, betrifft die visuelle Struktur des Codes und sorgt dafür, dass er lesbar und verständlich ist.

// Convention of preferred code formatting and quality
function add(a, b){
  return a + b;
}

// An example for what would be considered as
// poor code formatting, making it hard to read
// and error-prone
function add(c,d){return c+d;}

Im JavaScript-Ökosystem gibt es verschiedene Tools, mit denen Entwickler die Code-Formatierung und Codequalität aufrechterhalten können. ESLint und Biome zählen zu den beliebten Tools für Entwickler, die ihre Codebasis optimieren möchten.

Einführung in Biome und ESLint

ESLint ist ein Open-Source-Linting-Tool für JavaScript, das Entwicklern dabei hilft, hochwertigen JavaScript-Code zu schreiben. Es hilft dabei, problematische Muster oder Code zu erkennen, der bestimmte Stilrichtlinien nicht einhält. ESLint lässt sich umfassend anpassen und so konfigurieren, dass verschiedene Codierungsstandards durchgesetzt werden.

ESLint ist sehr beliebt und durch Plugins erweiterbar. Das bedeutet, Sie können benutzerdefinierte Regeln hinzufügen, um Ihre Codierungsstandards durchzusetzen. So können Sie beispielsweise festlegen, dass jede Anweisung mit einem Semikolon endet oder Zeichenfolgen einfache statt doppelte Anführungszeichen verwenden.

Wenn Sie sich schon einmal den Code eines JavaScript-Projekts angesehen haben, ist Ihnen vielleicht eine Datei wie .eslintrc.js begegnet:

// .eslintrc.js
module.exports = {
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

Biome hingegen ist ein relativ neues Tool im JavaScript-Ökosystem, das sich auf Code-Formatierung und Linting zur Prüfung der Codequalität konzentriert. Vielleicht kennen oder verwenden Sie bereits Prettier. Hier kommt Biome ins Spiel. Es wurde in Rust geschrieben und ist auf hohe Geschwindigkeit ausgelegt. Biome gibt größtenteils eine bestimmte Vorgehensweise vor, bietet aber eine kleine Auswahl an konfigurierbaren Optionen. Hier sehen Sie ein Beispiel für eine biome.json-Datei:

{
  "javascript": {
    "formatter": {
      "indentWidth": 2,
      "lineWidth": 100,
      "trailingComma": "none",
      "semicolons": "always",
    }
  }
}

Derzeit ist Biome mit JavaScript-, TypeScript-, JSX- und JSON-Dateien kompatibel.

Der Wechsel von Prettier zu Biome und ESLints Fokus auf Codequalität

Traditionell haben sich viele JavaScript-Entwickler bei der Code-Formatierung auf Prettier verlassen. Mit dem Aufkommen von Biome zeichnet sich jedoch ein Wandel ab. Biome setzt vor allem auf Geschwindigkeit und Performance. Das Tool wurde in Rust geschrieben und ist beim Formatieren von über 170.000 Codezeilen in 2.000 Dateien bis zu 35-mal schneller als Prettier. Bei der Arbeit mit einer großen Codebasis kann sich diese Geschwindigkeit erheblich auf den Entwicklungsprozess auswirken.

Das bedeutet nicht, dass ESLint verschwindet. Im Gegenteil: ESLint bleibt ein leistungsstarkes Tool zur Aufrechterhaltung der Codequalität. Biome konzentriert sich auf das Erscheinungsbild des Codes, ESLint auf dessen Verhalten. Die Tools ergänzen sich: Biome kümmert sich um die Code-Formatierung, während ESLint sicherstellt, dass der Code bewährte Verfahren einhält und frei von häufigen Fehlern ist.

Biome und ESLint sind beide hilfreiche Tools im Werkzeugkasten von JavaScript-Entwicklern. Sie tragen jeweils auf wichtige Weise zur Codequalität und Formatierung bei und führen so zu einer zuverlässigeren und besser wartbaren Codebasis.

Biome in einem JavaScript-Projekt verwenden

Biome stellt seine Funktionen über ein Kommandozeilen-Tool bereit, das eine statische Code-Analyse durchführt. Ein wesentlicher Vorteil ist die Anpassbarkeit: Entwickler können eigene Regeln definieren oder einen vorhandenen Satz an Standardregeln verwenden. Diese Flexibilität hilft dabei, Codierungsstandards und bewährte Verfahren in jedem JavaScript-Projekt durchzusetzen.

So können Sie Biome mit JavaScript verwenden:

# Install Biome as a development dependency
npm install --save-dev @biomejs/biome

Beachten Sie, dass Biome nach der Installation ein Installationsskript ausführen muss, um die erforderlichen Binärdateien für Ihre Plattform herunterzuladen. Fahren Sie anschließend fort:

# Initialize a new Biome configuration file
npx @biomejs/biome init

Dadurch wird im Stammverzeichnis Ihres Projekts eine Konfigurationsdatei biome.json erstellt. Sie können diese Datei anpassen, um die Regeln und Einstellungen für Ihr Projekt festzulegen. Standardmäßig gelten jedoch die folgenden Einstellungen:

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

Wie Sie sehen, fehlen in der Standardkonfiguration die Formatierungsregeln. Das könnte zu Inkompatibilitäten mit der Prettier-Konfiguration Ihres Projekts führen. Meine Datei .prettierrc.js sieht beispielsweise so aus:

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  useTabs: false,
  bracketSpacing: false
}

Damit Biome möglichst gut mit den oben gezeigten Prettier-Regeln zur Code-Formatierung kompatibel ist, können Sie der Datei biome.json Folgendes hinzufügen:

{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "quoteStyle": "single",
    "trailingComma": "none",
    "semicolons": "asNeeded",
    "bracketSpacing": true,
    "arrowParentheses": "asNeeded"
  }
}

Nun können wir den Formatter von Biome auf unsere Codebasis anwenden:

npx @biomejs/biome format ./src

Das Ergebnis ist, dass nur eine Formatierungsregel verbleibt, die Biome verbindlich vorgibt und nicht konfigurierbar ist: Sie betrifft die Abstände bei Funktionen.

./src/Utils.js format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:

     2  2 │
     3  3 │   module.exports = {
     4    │ - ··parseUrl:·function(urlToScan)·{
        4 │ + ··parseUrl:·function·(urlToScan)·{
     5  5 │       if (urlToScan === undefined) return urlToScan
     6  6 │
    ····· │
    12 12 │       return urlToScan
    13 13 │     },
    14    │ - ··trimUtmParams:·function(urlToTrim)·{
       14 │ + ··trimUtmParams:·function·(urlToTrim)·{

Alternativ können Sie ganz auf die Prettier-Konfiguration verzichten und die Formatierungsregeln von Biome verwenden.

Formatierung und Linting mit Biome kombinieren

Biome bietet außerdem einen Linter, mit dem sich Regeln zur Codequalität durchsetzen lassen. Er kann als Alternative zu ESLint betrachtet werden. Der Linter lässt sich so konfigurieren, dass er einen Satz an Standardregeln oder benutzerdefinierte Regeln aus der Konfigurationsdatei biome.json durchsetzt.

Um den Biome-Linter auszuführen, verwenden wir den Befehl biome check. Damit prüfen wir, ob Verstöße gegen die in der empfohlenen Standardregelmenge der Datei biome.json definierten Regeln vorliegen.

# Run Biome on your code
npx @biomejs/biome check ./src

Als ich Biome in meinem Code-Repository ausprobiert habe, erhielt ich folgende Ausgabe:

./src/Audit.js:30:7 lint/complexity/useOptionalChain  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Change to an optional chain.

    29 │     if (
  > 30 │       vulnerableAudit.details &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 31 │       vulnerableAudit.details.items &&
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 │       vulnerableAudit.details.items.length > 0
    33 │     ) {

  ℹ Unsafe fix: Change to an optional chain.

     28  28 │
     29  29 │       if (
     30     │ - ······vulnerableAudit.details·&&
     31     │ - ······vulnerableAudit.details.items·&&
         30 │ + ······vulnerableAudit.details?.items·&&
     32  31 │         vulnerableAudit.details.items.length > 0
     33  32 │       ) {

./src/RenderJson.js:27:7 lint/complexity/noForEach ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Prefer for...of instead of forEach.

    25 │       vulnerabilitiesResults.details.items.length > 0
    26 │     ) {
  > 27 │       vulnerabilitiesResults.details.items.forEach(vulnItem => {
       │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 │         vulnerabilitiesCount += vulnItem.vulnCount
  > 29 │         const vulnInfo = this.formatVulnerability(vulnItem)
  > 30 │         vulnerabilities.push(vulnInfo)
  > 31 │       })
       │       ^^
    32 │     }
    33 │

  ℹ forEach may lead to performance issues when working with large arrays. When combined with functions like filter or map, this causes multiple iterations over the same type.

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 15.
Checked 4 file(s) in 3ms
Found 35 error(s)
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

Es gibt also tatsächlich viele Abweichungen von der ESLint- und Prettier-Konfiguration, die ich bereits verwende. Sie müssen entscheiden, ob Sie den Linter und die vorgegebenen Formatierungsregeln von Biome nutzen oder möglichst viel Ihrer bestehenden Konfiguration über dessen Regeln und Optionen übernehmen möchten.

Die Befehle biome ci und biome explain

Der Befehl biome ci ist in einer Continuous-Integration-Umgebung (CI) praktisch. Bei der Ausführung prüft er den Code auf Verstöße gegen die in der Konfigurationsdatei biome.json definierten Regeln. Werden Verstöße gefunden, wird der Befehl mit einem Statuscode ungleich null beendet, der einen Fehler signalisiert.

Hier sehen Sie ein Beispiel für die Verwendung des Befehls biome ci:

# Check your code using biome ci
npx @biomejs/biome ci ./src

Der Befehl biome explain dient dagegen dazu, ausführliche Informationen zu einer bestimmten Regel abzurufen. Er erklärt, warum die Regel wichtig ist und wie sich Verstöße auf die Qualität Ihres Codes auswirken können. Außerdem gibt er ein Codebeispiel aus, das die Anwendung der Regel veranschaulicht.

Um beispielsweise die Regel „useArrowFunction“ besser zu verstehen, würden Sie den folgenden Befehl ausführen:

# Understand a specific rule
npx @biomejs/biome explain useArrowFunction

Dadurch wird in der Konsole ein Markdown-Dokument ausgegeben, das die Regel ausführlich erklärt.

# useArrowFunction

Fix is Safe.

This rule is recommended.

# Description
Use arrow functions over function expressions.

An arrow function expression is a compact alternative to a regular function expression,
with an important distinction:

this is not bound to the arrow function. It inherits this from its parent scope.

This rule proposes turning all function expressions that are not generators (function) and don't use this into arrow functions.

## Examples

### Invalid

const z = function() {
return 0;
}

const delegatedFetch = async function(url) {
return await fetch(url);
}

const f = function() {
return this.prop;
}

Named function expressions are ignored:

const z = function z() {
return 0;
}

Function expressions that declare the type of `this` are  also ignored:

const z = function(this: A): number {
return 0;
}

Biome in VS Code verwenden

Für Nutzer von Visual Studio Code (VS Code) bietet Biome eine eigene Erweiterung, die alle Funktionen von Biome direkt in Ihre IDE bringt. Die Erweiterung bietet Linting in Echtzeit, automatische Formatierung und vieles mehr.

So verwenden Sie Biome in VS Code:

1. Installieren Sie die Biome-Erweiterung über den VS Code Marketplace.

2. Öffnen Sie die Befehlspalette (Ansicht oder Strg/⌘+⇧+P), wählen Sie „Dokument formatieren mit“, dann „Standardformatter konfigurieren“ und anschließend Biome.

Biome und das Node.js-Projekt

Eine bedeutende aktuelle Entwicklung in der Codebasis des Node.js-Projekts ist der offene Pull Request von Yagiz Nizipli, mit dem Biome als standardmäßiger Code-Formatter eingeführt werden soll.

Die Integration von Biome in die Codebasis des Node.js-Projekts ist ein wichtiger Schritt hin zu einer einheitlichen Code-Formatierung. Bei einer so großen Codebasis wie der von Node.js ist die Laufzeit-Performance des Tools für Code-Formatierung und Linting zur Prüfung der Codequalität entscheidend, um Mitwirkenden schnelles Feedback zu geben.

Fazit

Bedeutet das, dass ESLint und Prettier verschwinden werden? Keineswegs. ESLint ist nach wie vor ein leistungsstarkes Tool zur Aufrechterhaltung der Codequalität. Es lässt sich mit benutzerdefinierten Regeln leicht durch Plugins erweitern und wird in zahlreichen Projekten des Ökosystems intensiv genutzt. Auch Prettier ist weiterhin eine beliebte Wahl für die Code-Formatierung. Biome etabliert sich jedoch als überzeugende, schnellere Alternative zu Prettier und als Linter zur Prüfung der Codequalität, der ESLint möglicherweise ersetzen könnte.

Setzen Sie auf sichere Programmierpraktiken

Entdecken Sie die Ressourcen von Snyk Learn, mit denen Sie sicheren, hochwertigen Code schreiben können.

Wenn Sie die statische Code-Analyse zur Formatierung und zum Linting schätzen, wird Ihnen die VS-Code-Erweiterung von Snyk gute Dienste leisten: Sie gibt Ihnen in Echtzeit Feedback zu Sicherheitslücken im Code und in Open-Source-Komponenten. Um Ihr Wissen und Ihre Kompetenz im Bereich sicherer Programmierpraktiken weiter auszubauen, melden Sie sich bitte bei Snyk an. Die Plattform setzt Sicherheit an erste Stelle und bietet zahlreiche Ressourcen, die Ihnen dabei helfen, sicheren, hochwertigen Code zu schreiben.