# Qualität `@templatical/quality` ist das Dachpaket für die Template-Qualitäts-Werkzeuge von Templatical — deterministische, ausschließlich JSON-basierte Linter, die Autorenfehler im Editor und in Headless- / CI-Prüfungen erkennen. MIT-lizenziert, ESM, kein Vue, kein DOM. ## Linter | Linter | Was er erkennt | Standard-Schweregrade | |---|---|---| | **[Barrierefreiheit](./accessibility/)** | Fehlender Alt-Text, niedriger Kontrast, vage CTAs, übersprungene Überschriftenebenen, zu kleine Touch-Ziele, lange GROSSBUCHSTABEN, target=_blank ohne rel, fehlender Preheader, … | überwiegend error/warning | | **[Struktur](./structure/)** | Doppelte Block-IDs, Sektionen mit falscher Spaltenanzahl, verschachtelte Sektionen, leere Sektionen, leere Spalten | überwiegend error; einige warning | | **[Links](./links/)** | Gefährliche URL-Schemata (`javascript:`), nicht unterstützte Protokolle, fehlerhafte `mailto:` / `tel:`, Staging-/localhost-URLs, die ins Template lecken | überwiegend warning; `link.javascript-protocol` ist error | Alle drei Linter liefern dieselbe `LintIssue`-Struktur und teilen sich dieselbe Optionsfläche (`LintOptions`) — Konsumenten können sie also in jeder Kombination ausführen, Ergebnisse zusammenführen und beim Gruppieren nach `ruleId`-Präfix (`a11y.*`, `structure.*`, `link.*`) filtern. Die Schweregrad-Overrides und tool-spezifischen Stellschrauben jedes Linters liegen unter seinem eigenen Namensraum (`accessibility`, `structure`, `links`); setzen Sie einen davon auf `false`, um den jeweiligen Linter komplett zu deaktivieren. **Alles mit einem Aufruf ausführen.** `lintTemplate(content, options?)` ist der einzelne aggregierte Einstiegspunkt — er führt alle drei Linter aus und liefert die zusammengeführten `LintIssue[]` (zuerst Barrierefreiheit, dann Struktur, dann Links). Greifen Sie standardmäßig dazu; die einzelnen Linter-Funktionen bleiben exportiert, falls Sie nur eine Teilmenge ausführen wollen. Um eine Kategorie zu überspringen, setzen Sie ihren Schlüssel auf `false`: `lintTemplate(content, { structure: false })`. Siehe [Headless-Nutzung](./headless-usage). ## Architektur Das Paket trifft keine UI-Annahmen. Das `useTemplateLint`-Composable des Editors lädt `@templatical/quality` per dynamischem Import nach, ruft alle Linter über den einzelnen `lintTemplate`-Aufruf bei (entprellten) Inhaltsänderungen auf und speist den zusammengeführten Issue-Strom in den **Issues**-Sidebar-Tab und die Per-Block-Canvas-Badges. `applyFix(issue)` führt jeden Patch über den bestehenden Block-Update-Pfad des Editors aus — Fixes landen so als ordentliche Undo-Einträge. ## Installation ::: code-group ```bash [npm] npm install @templatical/quality ``` ```bash [pnpm] pnpm add @templatical/quality ``` ```bash [yarn] yarn add @templatical/quality ``` ```bash [bun] bun add @templatical/quality ``` ::: Das Paket ist ein **optionaler Peer** von `@templatical/editor`. Installieren Sie es, um den Issues-Tab und die Canvas-Badges zu aktivieren. Lassen Sie es weg und der Editor bleibt schlank — der dynamische Import ist gegated und tree-shakeable, der Linter-Chunk wird nie geladen. ::: tip CDN-Nutzer Wenn Sie Templatical per CDN laden, gibt es nichts zu installieren. Das Editor-CDN-Bundle liefert `@templatical/quality` als separat ausgelagerten Code-Split-Chunk aus, der automatisch nachgeladen wird, sobald Linting aktiv ist. ::: ## Editor anbinden Übergeben Sie `lint` an `init()` oder `initCloud()`: ```ts import { init } from "@templatical/editor"; const editor = init({ container: "#editor", locale: "de", lint: { accessibility: { rules: { "a11y.img-missing-alt": "warning", // von Standard 'error' herabstufen "a11y.text-all-caps": "off", // komplett deaktivieren }, thresholds: { minFontSize: 16 }, }, structure: { rules: { "structure.empty-column": "info" }, // warning → info }, links: { rules: { "link.localhost-or-staging": "error" }, // vor Versand hochstufen nonProductionHosts: ["*.staging.*", "*.preview.*"], }, }, }); ``` Der Issues-Tab und die Canvas-Badges erscheinen automatisch, sobald der optionale Peer aufgelöst ist. Bei `lint.disabled === true` — oder wenn jeder Linter-Key (`accessibility`, `structure`, `links`) auf `false` steht — lädt der Editor das Paket gar nicht erst nach: kein Chunk-Download, keine UI. Setzen Sie einen einzelnen Linter auf `false`, um nur dessen Regeln auszuschalten: ```ts init({ container: "#editor", lint: { links: false } }); ``` ## Schnellzugriff - [Optionen](./options) — `disabled`, `locale`, pro-Tool-Namensräume `accessibility` / `structure` / `links`. - [Schweregrade & Fixes](./severity-and-fixes) — Schweregrad-Modell + wie Auto-Fix-Patches im Editor landen. - [Headless-Nutzung](./headless-usage) — `lintTemplate` + Validierung gespeicherter Templates in CI / Server-Save-Handlern. - [Lokalen beitragen](./contributing-locales) — Regel-Nachrichten + Vague-Text-Dictionaries hinzufügen. - [Barrierefreiheits-Linter](./accessibility/) — was er erkennt, Regelkatalog. - [Struktur-Linter](./structure/) — was er erkennt, Regelkatalog. - [Links-Linter](./links/) — was er erkennt, Regelkatalog.