Diese Anleitung beschreibt, wie ESLint in einem Symfony-Projekt verwendet werden kann, um JavaScript-Code zu testen. Die Schritte umfassen die Installation von npm unter Windows mit XAMPP und die Integration von ESLint in ein Symfony-Projekt.

Schritt 1: Node.js und npm unter Windows installieren

1. Node.js-Installer herunterladen:

• Besuche die Node.js-Website.
• Wähle die LTS-Version (Long Term Support) für eine stabilere Umgebung.
• Lade den Installer für Windows herunter.

1. Node.js installieren:

• Führe die heruntergeladene .msi-Datei aus.
• Folge den Anweisungen des Installationsassistenten. Node.js und npm werden automatisch installiert. Die Default-Einstellungen sind ausreichend.

1. Installation überprüfen:

• Öffne die Eingabeaufforderung (Cmd) oder PowerShell.
• Überprüfe die Node.js-Version mit node -v.
• Überprüfe die npm-Version mit npm -v.

Schritt 2: Integration von npm in ein XAMPP-Projekt

1. Projektverzeichnis auswählen:

• Öffne die Eingabeaufforderung oder PowerShell.
• Navigiere zum Projektverzeichnis unter C:\xampp\htdocs\dein-projekt.

1. npm-Projekt initialisieren:

• Führe npm init aus, um ein neues npm-Projekt zu initialisieren. Eine package.json-Datei wird erstellt.
• Die Standardeinstellungen können durch Drücken der Eingabetaste akzeptiert werden.

1. ESLint als Entwicklungsabhängigkeit installieren:

• Installiere ESLint mit dem folgenden Befehl: npm install eslint --save-dev
• ESLint wird im node_modules-Ordner des Projekts installiert.

Schritt 3: ESLint konfigurieren und verwenden

1. ESLint konfigurieren:

• Führe den Befehl npx eslint --init aus, um ESLint in deinem Projekt zu konfigurieren.
• Beantworte die Fragen, um die Konfiguration den Projektanforderungen anzupassen. Eine .eslintrc.json-Datei wird erstellt.

Inhalt der eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";


export default [
  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
];

Zusammenarbeit mit jQuery

Um überflüssige, genauer gesagt „falsche“ Fehler zu beheben, muss in der ESLint-Konfiguration angegeben werden, dass jQuery verwendet wird. Ansonsten gibt es gleich Hunderte von „error ‘$’ is not defined“ Meldungen, weil ESLint nicht weiß, dass $ aus der jQuery-Bibliothek stammt.

import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {
    files: ["**/*.js"],
    languageOptions: {
      sourceType: "script",
      globals: {
        ...globals.browser,
        $: "readonly",
        jQuery: "readonly",
      },
    },
  },
  pluginJs.configs.recommended,
];

1. JavaScript-Code mit ESLint überprüfen:

• Verwende den folgenden Befehl, um JavaScript-Dateien im Projekt zu überprüfen: npx eslint path/to/yourfile.js
• ESLint überprüft die Datei auf mögliche Fehler und gibt entsprechende Meldungen aus.
• Ich selbst nutze am liebsten folgenden Befehl, um alle Javascript-Dateien auf einmal zu prüfen:

npx eslint .\public\js\

1. Automatische Korrektur von Fehlern:

• Fehler können automatisch korrigiert werden, indem --fix an den Befehl angehängt wird: npx eslint path/to/yourfile.js --fix

Schritt 4: ESLint in den Entwicklungsworkflow integrieren

1. npm-Skripte für ESLint erstellen:

• In der package.json können npm-Skripte definiert werden, um ESLint leicht im Entwicklungsprozess zu verwenden. Zum Beispiel: "scripts": { "lint": "eslint . --ext .js,.jsx", "lint:fix": "eslint . --ext .js,.jsx --fix" }
• Diese Skripte können dann mit npm run lint oder npm run lint:fix ausgeführt werden.

Mit diesen Schritten ist ESLint in ein Symfony-Projekt integriert und kann verwendet werden, um JavaScript-Code zu überprüfen und zu verbessern. Die Verwendung von ESLint sorgt für sauberen, fehlerfreien Code, der den Best Practices entspricht.