JavaScript: Werkzeuge: Linter, Formatter, TypeScript

Kurz: Professionelle JavaScript-Projekte nutzen Werkzeuge, die Fehler früh finden und den Stil vereinheitlichen.

Teil des Kurses JavaScript

Kapitel 37 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Professionelle JavaScript-Projekte nutzen Werkzeuge, die Fehler früh finden und den Stil vereinheitlichen.

ESLint: Fehler und Unsauberkeiten finden

ESLint prüft den Code, ohne ihn auszuführen:

npm install -D eslint @eslint/js
npx eslint .
npx eslint . --fix        # behebt, was automatisch geht

Typische Funde: nicht benutzte Variablen, fehlende await, Vergleiche mit ==, nicht definierte Namen.

// eslint.config.js
import js from "@eslint/js";
export default [
  js.configs.recommended,
  { rules: { eqeqeq: "error", "no-unused-vars": "warn" } },
];

Prettier: einheitlich formatieren

Prettier formatiert Code automatisch (Einrückung, Anführungszeichen, Zeilenumbrüche). Dann gibt es keine Stil-Diskussionen mehr:

npm install -D prettier
npx prettier --write .

Im Editor

Mit der ESLint- und Prettier-Erweiterung in VS Code siehst du Fehler beim Tippen und formatierst beim Speichern.

Git-Hooks und CI

• Mit husky und lint-staged laufen Linter und Tests vor jedem Commit
• In der CI (z. B. GitHub Actions) laufen sie bei jedem Pull Request: so kommt nichts Kaputtes in den Hauptzweig

TypeScript

TypeScript ist JavaScript mit Typen. Du schreibst, welche Werte erwartet werden, und der Compiler meldet Fehler, bevor das Programm läuft:

function begruessen(name: string, alter: number): string {
  return `${name} ist ${alter}`;
}
begruessen("Mia", "17");   // Fehler: "17" ist kein number

TypeScript wird zu normalem JavaScript übersetzt (npx tsc) oder direkt von Werkzeugen wie Vite, esbuild, tsx oder neueren Node-Versionen ausgeführt. In größeren Projekten ist es heute Standard.

Du kannst Typen auch ohne TypeScript-Dateien nutzen, mit JSDoc-Kommentaren:

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function addiere(a, b) {
  return a + b;
}
console.log(addiere(2, 3));

Ausgabe:

5

Der Editor und tsc --checkJs verstehen diese Kommentare und prüfen die Typen.

Bundler und Build-Werkzeuge

Für Browser-Projekte fassen Bundler viele Module zu wenigen Dateien zusammen, minimieren sie und wandeln neue Sprachfunktionen für ältere Browser um:

Werkzeug	Eigenschaft
Vite	Standard für neue Projekte: schneller Entwicklungsserver, einfache Konfiguration
esbuild	extrem schneller Bundler (Teil von vielen Werkzeugen)
webpack	mächtig und weit verbreitet, aber aufwendiger
Rollup	gut für Bibliotheken

Frameworks

Für größere Oberflächen nutzt man Frameworks, die das DOM für dich verwalten:

Framework	Idee
React	Komponenten als Funktionen mit JSX; größte Verbreitung
Vue	leicht zugänglich, klare Einzeldatei-Komponenten
Svelte	kompiliert Komponenten zu schlankem Code
Angular	umfangreiches Komplett-Framework mit TypeScript
Next.js, Nuxt, SvelteKit	Frameworks mit Server, Routing und Rendering

Lerne zuerst solides JavaScript. Frameworks sind Werkzeuge darauf, und wer die Grundlagen kennt, steigt viel schneller ein.

Debuggen

• Browser-Entwicklerwerkzeuge (F12): Elemente prüfen, Netzwerk beobachten, Haltepunkte setzen
• debugger; im Code hält die Ausführung an, wenn die Werkzeuge offen sind
• console.table(), console.group(), console.time() für bessere Ausgaben
• In Node.js: node --inspect-brk datei.js und mit Chrome unter chrome://inspect verbinden

console.group("Auswertung");
console.table([{ name: "Mia", punkte: 12 }, { name: "Tom", punkte: 9 }]);
console.groupEnd();
console.log("danach ohne Einrückung");
// console.time("schleife") ... console.timeEnd("schleife") misst Zeiten

Ausgabe:

Auswertung
  ┌─────────┬───────┬────────┐
  │ (index) │ name  │ punkte │
  ├─────────┼───────┼────────┤
  │ 0       │ 'Mia' │ 12     │
  │ 1       │ 'Tom' │ 9      │
  └─────────┴───────┴────────┘
danach ohne Einrückung

Merke

• ESLint findet Fehler, Prettier formatiert einheitlich
• Husky/CI führen Prüfungen automatisch aus
• TypeScript ergänzt Typen und findet Fehler vor der Ausführung
• Vite/esbuild bündeln den Code für den Browser
• Frameworks (React, Vue, Svelte) bauen auf solidem JavaScript auf

Übungsaufgabe

Richte in einem Projekt ESLint und Prettier ein, lass sie über deinen Code laufen und behebe, was sie melden.

Quiz zur Selbstkontrolle

Was macht ein Linter?

• Prüft Code auf Fehler und Stilprobleme, ohne ihn auszuführen (richtig)
• Führt Code schneller aus
• Lädt Pakete herunter
• Übersetzt Code in Maschinensprache

Was ergänzt TypeScript?

• Statische Typen (richtig)
• Neue Browser
• Eine Datenbank
• Ein Design-System

Wofür ist Vite gedacht?

• Für Entwicklungsserver und Bündeln von Browser-Projekten (richtig)
• Für Datenbanken
• Für E-Mails
• Für Tests von Hardware

Weiter im Kurs

Zurück: Code testen

Weiter: Sauberer Code und häufige Fallen

Alle Kapitel: JavaScript im Überblick