Archiv der Kategorie: Debugging

ESLint zum Testen von JavaScript in Symfony-Projekten mit npm unter XAMPP installieren

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.

Verwendung von PHP Mess Detector mit Symfony und GIT pre-commit Hook

Einführung in PHPMD

Was ist PHPMD?

PHP Mess Detector (PHPMD) ist ein Werkzeug zur statischen Code-Analyse für PHP-Projekte. Es hilft Entwicklern, potenzielle Probleme und Code-Missstände in ihrem PHP-Code zu erkennen. Dazu gehören unter anderem:

  • Code-Komplexität: Identifikation von zu komplexem Code, der schwer zu warten und zu verstehen ist.
  • Code-Duplikation: Aufspüren von redundanten Code-Teilen.
  • Code-Design-Probleme: Erkennung von Anti-Patterns und schlechten Designentscheidungen.
  • Verstöße gegen Namenskonventionen: Sicherstellen, dass der Code den definierten Namenskonventionen folgt.
  • Nicht verwendeter Code: Identifizierung von ungenutztem Code, der entfernt werden kann.

Wofür wird PHPMD genutzt?

PHPMD wird verwendet, um die Qualität des PHP-Codes zu verbessern und potenzielle Probleme frühzeitig zu erkennen. Dies ist besonders in größeren Projekten hilfreich, um die Wartbarkeit und Erweiterbarkeit des Codes zu gewährleisten. Durch die Integration von PHPMD in den Entwicklungsprozess kann sichergestellt werden, dass der Code kontinuierlich den Qualitätsstandards entspricht.

1. Installation und manuelle Nutzung von PHPMD

Schritt 1: Installation von PHPMD

  • PHPMD kann global über Composer installiert werden:
composer global require phpmd/phpmd

Alternativ kann es auch als Abhängigkeit im Symfony-Projekt installiert werden:

composer require --dev phpmd/phpmd

Schritt 2: Manuelle Ausführung von PHPMD

  • PHPMD kann in einem Symfony-Projekt manuell ausgeführt werden, um die Codequalität zu überprüfen. Beispielsweise:
./vendor/bin/phpmd src/ text cleancode,codesize,controversial,design,naming,unusedcode

Hierbei überprüft PHPMD den src/-Ordner des Projekts und gibt Berichte im Textformat über die angegebenen Regelsets (cleancode, codesize, controversial, design, naming, unusedcode) aus. Diese Berichte geben Hinweise darauf, welche Teile des Codes verbessert werden sollten.

2. Automatisierung mit einem Git pre-commit Hook

Um sicherzustellen, dass der Code immer den Qualitätsstandards entspricht, kann PHPMD automatisiert ausgeführt werden, bevor Änderungen in das Git-Repository gepusht werden. Dies geschieht durch die Einrichtung eines Git pre-commit Hooks.

Schritt 1: Erstellen des pre-commit Hooks

  • Im Git-Repository gibt es ein Verzeichnis .git/hooks/. Hier kann eine Datei namens pre-commit erstellt werden:
touch .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

Schritt 2: Skript für den pre-commit Hook schreiben

Um sicherzustellen, dass nur die Dateien überprüft werden, die tatsächlich in den Commit aufgenommen werden sollen, sollte man den pre-commit Hook so konfigurieren, dass er nur die Dateien überprüft, die für den Commit vorgemerkt sind (staged Dateien).

  • In die Datei pre-commit wird folgendes Skript eingefügt:
#!/bin/sh

# Listet alle Dateien auf, die für den Commit vorgemerkt sind
staged_files=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.php$')

# Wenn keine PHP-Dateien im Commit sind, überspringe die Überprüfung
if [ -z "$staged_files" ]; then
    echo "Keine PHP-Dateien zum Überprüfen."
    exit 0
fi

# Führe PHPMD Checker nur auf den vorgemerkten Dateien aus
php phpmd_checker.php $staged_files
if [ $? -ne 0 ]; then
    echo "PHPMD Checker hat Fehler in den vorgemerkten Dateien gefunden. Commit wird abgebrochen."
    exit 1
fi

Schritt 3: Testen des Hooks

  • Sobald der pre-commit Hook eingerichtet ist, wird PHPMD automatisch vor jedem commit ausgeführt. Wenn PHPMD Probleme im Code findet, wird der Commit abgebrochen, und die Probleme werden in der Konsole ausgegeben.

Bessere Ausgabe von PHPMD

Die Ausgabe von PHPMD ist sehr unübersichtlich, aber sie kann so formatiert werden, dass sie geordnet nach Dateien angezeigt wird, um die Übersichtlichkeit zu verbessern.

Dazu ist es möglich, ein eigenständiges Skript zu erstellen, das die Ausgabe von PHPMD übersichtlich nach Dateien sortiert und darstellt. Dieses Skript kann unabhängig von Git Hooks verwendet werden und hilft dabei, die Ergebnisse von PHPMD einfacher zu interpretieren und Fehler effizienter zu beheben.

Ich zeige anhand eines PHP-Skriptes, wie das sowohl für die manuelle als auch für die automatisierte Ausgabe mit pre-commit Hook funktioniert.

Erstellen Sie eine Datei namens phpmd_checker.php im Stammverzeichnis Ihres Projekts:

touch phpmd_checker.php

Fügen Sie folgenden Inhalt in die Datei phpmd_checker.php ein:

<?php

// Konfiguration
$phpmdPath = __DIR__ . '/vendor/bin/phpmd'; // Pfad zu PHPMD
$directories = ['src/']; // Zu prüfende Verzeichnisse
$rulesetFile = __DIR__ . '/ruleset.xml'; // Pfad zur benutzerdefinierten Regeldatei
$format = 'xml'; // Ausgabeformat

// PHPMD ausführen
$command = sprintf(
    '%s %s %s %s',
    escapeshellcmd($phpmdPath),
    escapeshellarg(implode(',', $directories)),
    escapeshellarg($format),
    escapeshellarg($rulesetFile)
);

$output = shell_exec($command);

// Überprüfen, ob Ausgabe vorhanden ist
if (empty($output)) {
    echo "Keine Probleme gefunden. Der Code entspricht den definierten Standards." . PHP_EOL;
    exit(0);
}

// XML-Ausgabe parsen
$xml = simplexml_load_string($output);

if ($xml === false) {
    echo "Fehler beim Parsen der PHPMD-Ausgabe." . PHP_EOL;
    exit(1);
}

// Überprüfen, ob es Verstöße gibt
$violationsExist = false;
foreach ($xml->file as $file) {
    if (!empty($file->violation)) {
        $violationsExist = true;
        break;
    }
}

if (!$violationsExist) {
    echo "Keine Probleme gefunden. Der Code entspricht den definierten Standards." . PHP_EOL;
    exit(0);
}

// Ausgabe formatieren
echo "\n3[1;31mPHPMD hat folgende Probleme festgestellt:3[0m\n\n";

foreach ($xml->file as $file) {
    $filePath = (string) $file['name'];
    echo "3[1;34m{$filePath}:3[0m\n";
    
    foreach ($file->violation as $violation) {
        $beginLine = (string) $violation['beginline'];
        $rule = (string) $violation['rule'];
        $message = trim((string) $violation);
        
        echo "  3[1;33mZeile {$beginLine} ({$rule}):3[0m {$message}\n";
    }
    
    echo "\n";
}

exit(1);

Führen Sie das PHP-Skript mit dem PHP-Interpreter aus:

php phpmd_checker.php

Beispielausgabe

Bei gefundenen Problemen könnte die Ausgabe wie folgt aussehen:

PHPMD hat folgende Probleme festgestellt:

src/Controller/DefaultController.php:
  Zeile 12: Die Methode 'indexAction' hat zu viele Parameter. Erwägen Sie, die Anzahl der Parameter zu reduzieren.
  Zeile 45: Vermeiden Sie die Verwendung von kurzen Variablennamen wie '$a'. Nutzen Sie aussagekräftigere Namen.

src/Service/UserService.php:
  Zeile 22: Die Methode 'getUserData' ist zu lang. Teilen Sie komplexe Methoden in kleinere auf.

Wenn keine Probleme gefunden wurden:

Keine Probleme gefunden. Der Code entspricht den definierten Standards.

Anpassungen und Erweiterungen

Anpassung der Verzeichnisse und Regelsets:

  • Passen Sie die Variablen DIRECTORIES und RULESETS im Skript an Ihre Projektstruktur und Qualitätsanforderungen an.

Integration in IDEs:

  • Das Skript kann in Ihre Entwicklungsumgebung integriert werden, um während der Entwicklung schnell aufrufbar zu sein.

Erweiterte Formatierung:

  • Weitere Formatierungen wie z.B. Ausgabe als HTML können implementiert werden, um Berichte zu generieren.

Fehlerbehandlung:

  • Fügen Sie zusätzliche Fehlerbehandlungen hinzu, um mit unerwarteten Situationen umzugehen, z.B. wenn PHPMD nicht gefunden wird.

Parameterübergabe:

  • Erweitern Sie das Skript, um Parameter über die Kommandozeile entgegenzunehmen, z.B. um unterschiedliche Verzeichnisse oder Regelsets dynamisch anzugeben.

Beispiel für parameterisiertes Bash-Skript:

./phpmd_checker.sh src/ cleancode,codesize

Mit diesem Skript haben Sie ein leistungsfähiges Werkzeug, um die Codequalität Ihres PHP-Projekts effektiv zu überwachen und zu verbessern. Die übersichtliche Darstellung der Ergebnisse erleichtert es, Probleme schnell zu identifizieren und zu beheben.