0Pricing
JavaScript Academy · Lektion

Linting mit ESLint und Formatierung mit Prettier

Häufige Probleme mit ESLint erkennen und mit Prettier automatisch formatieren. Konfigurationen klein halten und über npm-Skripte ausführen

Linting mit ESLint und Formatierung mit Prettier ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Warum Linting und Formatierung?

Ziel: Code sauber und einheitlich halten.

  • ESLint → erkennt Probleme
  • Prettier → formatiert Code
  • Kleine Konfigurationen; über npm scripts ausführen
  • Anfängerfreundliche Standardeinstellungen
Linting mit ESLint und Formatierung mit Prettier — Illustration 1

ESLint: Probleme erkennen

ESLint setzt Regeln durch, um Fehler zu erkennen und den Stil zu verbessern; hier ahmen wir einige einfache Prüfungen nach.

// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";

function lint(code) {
  const issues = [];
  if (code.includes("console.log")) {
    issues.push("no-console: avoid console.log in production code");
  }
  if (code.includes("=1;")) {
    issues.push("spacing: add spaces around = for readability");
  }
  if (!code.trim().endsWith(";")) {
    issues.push("semi: missing semicolon");
  }
  return issues;
}

console.log("lint issues:", lint(sample));
Linting mit ESLint und Formatierung mit Prettier — Illustration 2

Prettier: Einheitliches Layout

Prettier konzentriert sich auf automatische Formatierung, sodass alle dasselbe Layout verwenden, ohne darüber diskutieren zu müssen.

// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
  // Very naive formatting just for demo
  const spaced = code.replaceAll("=1;", " = 1;");
  const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
  return withSemi;
}

const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));
Linting mit ESLint und Formatierung mit Prettier — Illustration 3

Kleine ESLint-Konfiguration

Beginnen Sie mit eslint:recommended und fügen Sie anschließend ein oder zwei Regeln hinzu. Halten Sie die Konfiguration für Anfänger klein.

// Example .eslintrc.json (printed lines)
const eslintrc = [
  "{",
  "  \"env\": { \"es2022\": true, \"node\": true },",
  "  \"extends\": [\"eslint:recommended\"],",
  "  \"rules\": {",
  "    \"no-console\": \"warn\",",
  "    \"semi\": [\"error\", \"always\"]",
  "  }",
  "}"
];

for (const l of eslintrc) console.log(l);
Linting mit ESLint und Formatierung mit Prettier — Illustration 4

Kleines Prettier plus Scripts

Fügen Sie einfache format- und lint-Scripts hinzu, damit das Team sie problemlos ausführen kann.

// Example .prettierrc (printed lines)
const prettierrc = [
  "{",
  "  \"semi\": true,",
  "  \"singleQuote\": true,",
  "  \"tabWidth\": 2",
  "}"
];

for (const l of prettierrc) console.log(l);

// Example npm scripts (printed)
const scripts = [
  "\"scripts\": {",
  "  \"lint\": \"eslint .\",",
  "  \"format\": \"prettier --write .\"",
  "}"
];

for (const l of scripts) console.log(l);
Linting mit ESLint und Formatierung mit Prettier — Illustration 5

Alltäglicher Workflow

Tipps:

  • Führen Sie vor Commits format aus.
  • Halten Sie die ESLint-Regeln überschaubar und verständlich.
  • Verwenden Sie eslint:recommended und eine kleine .prettierrc.
  • Fügen Sie ein Kurzbefehls-Script wie npm run fix für automatische Korrekturen hinzu.
Linting mit ESLint und Formatierung mit Prettier — Illustration 6

Prettier- oder ESLint-Quiz

Kurze Überprüfung: Tool zur Formatierung.

Linting mit ESLint und Formatierung mit Prettier — Illustration 7

Zusammenfassung

Zusammenfassung: Verwenden Sie ESLint, um Probleme zu erkennen, und Prettier, um Code zu formatieren. Halten Sie die Konfigurationen klein und führen Sie beide über npm scripts aus, damit der Workflow im Team reibungslos funktioniert.

Linting mit ESLint und Formatierung mit Prettier — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Linting mit ESLint und Formatierung mit Prettier“ kostenlos?

Ja — der vollständige Text von „Linting mit ESLint und Formatierung mit Prettier“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Linting mit ESLint und Formatierung mit Prettier“?

Häufige Probleme mit ESLint erkennen und mit Prettier automatisch formatieren. Konfigurationen klein halten und über npm-Skripte ausführen Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Linting mit ESLint und Formatierung mit Prettier“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Testdenken – kleine Assertions, AAA, rot→grün→refaktorisieren
  2. Linting mit ESLint und Formatierung mit Prettier
  3. CI-Grundlagen – bei jedem Push Linting und Tests ausführen
← Zurück zu JavaScript Academy