Werkzeuge: Linter, Formatter, TypeScript

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:

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:

Frameworks

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

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

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