Frontend Quality Tools

Linting und Validierung für JavaScript, CSS und HTML. Stellt Code-Qualität, Konsistenz und Best Practices im Frontend sicher.

ESLint9.39.2 (JavaScript Linting)
Prettier3.7.4 (Code Formatting)
Stylelint16.26.1 (CSS Linting)
HTMLHint1.8.0 (HTML Validierung)
InstallationGlobal via npm
Konfiguration/opt/scripts/

Quick Start

# JavaScript prüfen
/opt/scripts/js-check.sh

# CSS prüfen
/opt/scripts/css-check.sh

# HTML/PHP-Views prüfen
/opt/scripts/html-check.sh

# Beliebiges Projekt prüfen
/opt/scripts/js-check.sh /var/www/anderes-projekt

ESLint (JavaScript)

Statische Analyse für JavaScript-Code. Findet Bugs, erzwingt Best Practices und konsistenten Style.

Version9.39.2
Konfig/opt/scripts/eslint.config.js (Flat Config)
Scopepublic/js/**/*.js
ECMAScript2024
ModuleES Modules (native Browser)

Regeln

RegelEinstellungBeschreibung
no-varerrorNur let/const, kein var
prefer-consterrorconst wenn nicht reassigned
eqeqeqerrorStrikte Gleichheit (===)
no-unused-varserrorKeine ungenutzten Variablen (außer _prefix)
no-consolewarnconsole.log nur als Warnung
no-evalerrorKein eval() (Security)
semierrorSemikolons erforderlich
quoteserrorDouble Quotes
indenterror2 Spaces
comma-dangleerrorTrailing Commas in Multiline

Browser Globals

Folgende Browser-APIs sind als readonly konfiguriert:

window, document, console, setTimeout, clearTimeout,
requestAnimationFrame, cancelAnimationFrame, AbortController,
URL, URLSearchParams, performance, Date, fetch,
localStorage, sessionStorage, location, FormData,
Headers, Response, Request, MutationObserver,
IntersectionObserver, ResizeObserver

Direkt ausführen

# Check
npx eslint public/js --config /opt/scripts/eslint.config.js

# Mit Auto-Fix
npx eslint public/js --config /opt/scripts/eslint.config.js --fix

Prettier (Formatting)

Automatische Code-Formatierung für JavaScript. Wird von js-check.sh verwendet.

Version3.7.4
Tab Width2 Spaces
SemicolonsJa
QuotesDouble
Trailing Commaall

Direkt ausführen

# Check
npx prettier --check "public/js/**/*.js"

# Auto-Format
npx prettier --write "public/js/**/*.js"

Stylelint (CSS)

Linting für CSS-Dateien. Fokus auf echte Fehler, keine Style-Präferenzen.

Version16.26.1
Konfig/opt/scripts/.stylelintrc.json
Scopepublic/css/**/*.css

Fehler-Regeln (aktiviert)

RegelBeschreibung
color-no-invalid-hexKeine ungültigen Hex-Farben
font-family-no-duplicate-namesKeine doppelten Font-Namen
function-calc-no-unspaced-operatorLeerzeichen in calc()
string-no-newlineKeine Zeilenumbrüche in Strings
unit-no-unknownKeine unbekannten Einheiten
property-no-unknownKeine unbekannten Properties
declaration-block-no-duplicate-propertiesKeine doppelten Properties
declaration-block-no-shorthand-property-overridesShorthand überschreibt nicht Longhand
selector-pseudo-class-no-unknownKeine unbekannten Pseudo-Klassen
selector-pseudo-element-no-unknownKeine unbekannten Pseudo-Elemente
selector-type-no-unknownKeine unbekannten Selektoren
media-feature-name-no-unknownKeine unbekannten Media Features
no-duplicate-at-import-rulesKeine doppelten @import
no-duplicate-selectorsKeine doppelten Selektoren
no-empty-sourceKeine leeren Dateien
block-no-emptyKeine leeren Blöcke
length-zero-no-unitKeine Einheit bei 0
shorthand-property-no-redundant-valuesKeine redundanten Shorthand-Werte

Limits

RegelWert
selector-max-id2
max-nesting-depth4
number-max-precision4

Deaktivierte Style-Regeln

Folgende Regeln sind bewusst deaktiviert (null), da sie Style-Präferenzen und keine Fehler prüfen:

Direkt ausführen

# Check
npx stylelint "public/css/**/*.css" --config /opt/scripts/.stylelintrc.json

# Mit Auto-Fix
npx stylelint "public/css/**/*.css" --config /opt/scripts/.stylelintrc.json --fix

HTMLHint (HTML/PHP-Views)

Validierung von HTML-Struktur in PHP-Templates.

Version1.8.0
Konfig/opt/scripts/.htmlhintrc
Scopesrc/View/**/*.php (ohne docs/)

Aktivierte Regeln

RegelBeschreibung
tagname-lowercaseTags in Kleinbuchstaben
attr-lowercaseAttribute in Kleinbuchstaben
attr-value-double-quotesAttributwerte in Double Quotes
attr-no-duplicationKeine doppelten Attribute
id-uniqueIDs müssen eindeutig sein
src-not-emptysrc-Attribute nicht leer
alt-requirealt-Attribut bei Bildern erforderlich
space-tab-mixed-disabledNur Spaces, keine Tabs
attr-unsafe-charsKeine unsicheren Zeichen in Attributen

Deaktivierte Regeln (PHP-Kompatibilität)

Diese Regeln produzieren False Positives bei PHP-Templates:

RegelGrund
tag-pairPHP-Syntax <?= ?>> wird als Tag-Fehler erkannt
spec-char-escapePHP-Tags <?php ?> werden als unescaped erkannt
doctype-firstPHP-Templates beginnen mit <?php
title-requireTemplates sind keine vollständigen HTML-Dokumente
doctype-html5DOCTYPE ist im Layout, nicht in Templates

Direkt ausführen

htmlhint src/View --config /opt/scripts/.htmlhintrc

Prüfscripts

js-check.sh

JavaScript-Qualitätsprüfung mit ESLint und Prettier.

Pfad/opt/scripts/js-check.sh
Default-Projekt/var/www/dev.campus.systemische-tools.de
Prüftpublic/js/**/*.js

Checks

#CheckTool
1LintingESLint
2FormattingPrettier

Verwendung

# Dev-Projekt
/opt/scripts/js-check.sh

# Anderes Projekt
/opt/scripts/js-check.sh /var/www/anderes-projekt

Ausgabe

=== JavaScript Quality Check: Fri Dec 20 12:00:00 CET 2025 ===
Directory: /var/www/dev.campus.systemische-tools.de/public/js

Found 2 JavaScript file(s)

[1/2] ESLint - Linting
✓ ESLint: No errors (1 warning)

[2/2] Prettier - Formatting
✓ Prettier: All files formatted

=== Summary ===
All checks passed!

css-check.sh

CSS-Qualitätsprüfung mit Stylelint.

Pfad/opt/scripts/css-check.sh
Default-Projekt/var/www/dev.campus.systemische-tools.de
Prüftpublic/css/**/*.css

Verwendung

# Dev-Projekt
/opt/scripts/css-check.sh

# Mit Auto-Fix
cd /var/www/dev.campus.systemische-tools.de && \
npx stylelint "public/css/**/*.css" --config /opt/scripts/.stylelintrc.json --fix

Ausgabe

=== CSS Quality Check: Fri Dec 20 12:00:00 CET 2025 ===
Directory: /var/www/dev.campus.systemische-tools.de/public/css

Found 3 CSS file(s)

[1/1] Stylelint - Linting
✓ Stylelint: No errors

=== Summary ===
All checks passed!

html-check.sh

HTML-Validierung für PHP-Templates.

Pfad/opt/scripts/html-check.sh
Default-Projekt/var/www/dev.campus.systemische-tools.de
Prüftsrc/View/**/*.php (ohne docs/)

Hinweis

Das Script kopiert PHP-Views temporär als .html-Dateien für HTMLHint. Einige Regeln sind deaktiviert, da PHP-Syntax False Positives erzeugt.

Verwendung

# Dev-Projekt
/opt/scripts/html-check.sh

# Anderes Projekt
/opt/scripts/html-check.sh /var/www/anderes-projekt

Ausgabe

=== HTML Quality Check: Fri Dec 20 12:00:00 CET 2025 ===
Directory: /var/www/dev.campus.systemische-tools.de/src/View

Found 9 View file(s)

[1/1] HTMLHint - HTML Structure Check
Scanned 5 files, no errors found
✓ HTMLHint: No errors

=== Summary ===
All checks passed!

Script-Übersicht

ScriptSpracheToolsWann verwenden
js-check.shJavaScriptESLint, PrettierNach JS-Änderungen
css-check.shCSSStylelintNach CSS-Änderungen
html-check.shHTML/PHPHTMLHintNach View-Änderungen

Contracts

Die Frontend-Tools validieren folgende Architecture Contracts:

ContractTool
js-browser-architecture-contract_v2.yamlESLint
css-component-architecture_v1.0.yamlStylelint
html-tables-contract_v1.0.yamlHTMLHint

Konfigurationsdateien

DateiToolFormat
/opt/scripts/eslint.config.jsESLintES Module (Flat Config)
/opt/scripts/.stylelintrc.jsonStylelintJSON
/opt/scripts/.htmlhintrcHTMLHintJSON

Einschränkungen

HTMLHint + PHP

HTMLHint ist für reines HTML konzipiert. Bei PHP-Templates gibt es Einschränkungen:

Workaround

Die verbleibenden Regeln (ID-Unique, Alt-Require, Attr-Validation) funktionieren zuverlässig und bieten weiterhin Mehrwert.