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
- 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.
- 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.
- 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
- Projektverzeichnis auswählen:
- Öffne die Eingabeaufforderung oder PowerShell.
- Navigiere zum Projektverzeichnis unter
C:\xampp\htdocs\dein-projekt
.
- npm-Projekt initialisieren:
- Führe
npm init
aus, um ein neues npm-Projekt zu initialisieren. Einepackage.json
-Datei wird erstellt. - Die Standardeinstellungen können durch Drücken der Eingabetaste akzeptiert werden.
- 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
- 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,
];
- 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\
- 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
- 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
odernpm 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.