Eslint

Eslint und Prettier: Wie funktionieren sie zusammen?

Erfahrung mit JavaScript-Code verbessern: Wie Eslint und Prettier zusammenarbeiten

Julian

Julian

— 2 min read

Erfahrung mit JavaScript-Code verbessern: Wie Eslint und Prettier zusammenarbeiten

JavaScript ist eine beliebte Programmiersprache für Webentwicklung, mobile Apps und viele andere Anwendungen. Mit der zunehmenden Komplexität von Codebases wird es immer schwieriger, Code zu schreiben und zu halten. Hier kommen zwei Tools ins Spiel: Eslint und Prettier.

Was sind Eslint und Prettier?

Eslint ist ein static Analysis-Tool, das darauf ausgelegt ist, JavaScript-Code auf Fehler und Regeln abzuschrecken. Es bietet eine Vielzahl von Einstellungen, die es ermöglichen, spezifische Anforderungen für den Code zu definieren. Prettier hingegen ist ein Code-Styler, der darauf ausgelegt ist, JavaScript-Code in einem bestimmten Format zu formatieren. Es verwendet Regeln und Einstellungen, um den Code zu prüfen und ihn zu verbessern.

Wie funktioniert es?

Es gibt mehrere Möglichkeiten, wie Eslint und Prettier zusammen gearbeitet werden können:

1. Integriertes Workflow

Ein integriertes Workflow bedeutet, dass die Tools direkt in den Code-Editor oder das IDE integriert sind. Wenn du einen neuen Code-Block schreibst, wird Eslint automatisch auf Fehler überprüft. Prettier formatiert den Code nach den Regeln, die du festgelegt hast.

2. externes Tool

Du kannst auch Eslint und Prettier separat verwenden, um sicherzustellen, dass dein Code korrekt und einheitlich ist. Vor der Commit-Menge kann Eslint auf Fehler überprüfen. Anschließend kannst du Prettier verwenden, um den Code zu formatieren.

3. Automatisierte Regeneration

Du kannst auch automatisiert zwischen den beiden Tools wechseln, indem du Prettier vor Eslint ausführst. Wenn du einen neuen Code-Block schreibst, formatiere ihn mit Prettier. Dann überprüfe ihn mit Eslint auf Fehler.

Wie kann ich es am besten in mein Projekt integrieren?

Es gibt mehrere Möglichkeiten, wie du Eslint und Prettier in dein Projekt integrieren kannst:

  • Installiere die Tools separat: npm install eslint@latest prettier --save-dev
  • Verwende eine IDE oder ein Code-Editor mit einem Paket-Manager, der ESLint und Prettier unterstützt.
  • Erstelle ein .eslintrc.js oder ein .prettierrc.json-Datei in deinem Projektverzeichnis.

Beispiel für die .eslintrc.js-Einstellungen

{
    "root": true,
    "env": {
        "es6": true,
        "node": true
    },
    "extends": [
        "plugin:prettier/recommended"
    ],
    "rules": {
        "prettier/prettier": "error",
        "semi": "error",
        "space-in-parens": ["error", "always"],
        "object-curly-spacing": ["error", "always"]
    }
}

Beispiel für die .prettierrc-Einstellungen

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSameLine": true,
  "arrowParens": "always"
}

Zusammenfassung

Eslint und Prettier sind zwei Tools, die zusammenarbeiten können, um sicherzustellen, dass dein JavaScript-Code korrekt und einheitlich ist. Es gibt verschiedene Möglichkeiten, wie du sie in dein Projekt integrieren kannst. Es ist wichtig, die richtigen Einstellungen für deine Bedürfnisse zu finden, um sicherzustellen, dass dein Code optimal ist.

Read more