Übersicht

@generaltranslation/react-core-linter 0.1.0 führt ESLint-Regeln für die Integration von General Translation React Core ein.

Dieses Plugin erkennt häufige Implementierungsfehler, die wir in der Praxis gesehen haben.

Installation

npm install @generaltranslation/react-core-linter --save-dev

In dieser ersten Version sind zwei Regeln enthalten:

• static-jsx - Erzwingt das korrekte Einbetten von Variablen in <T>-Komponenten
• static-string - Stellt sicher, dass Zeichenketten in Übersetzungsfunktionen statisch sind

Statische JSX-Validierung

Die static-jsx-Regel verhindert, dass dynamischer Inhalt direkt in <T>‑Komponenten erscheint. Dynamischer Inhalt muss in Variablen‑Komponenten eingebettet werden.

// ❌ Wrong
<T>Hello {userName}!</T>

// ✅ Richtig  
<T>Hello <Var>{userName}</Var>!</T>

Erzwingen statischer Strings

Die static-string-Regel stellt sicher, dass Übersetzungsfunktionen nur statische (nicht dynamische) Strings akzeptieren.

const gt = useGT();

// ❌ Wrong
gt(`Hello ${name}`)
gt('Hello ' + name)

// ✅ Korrekt
gt('Hello {name}!', { name })

Konfiguration

Fügen Sie Folgendes zu Ihrer ESLint-Konfiguration hinzu:

import { defineConfig } from 'eslint';
import gtLint from '@generaltranslation/react-core-linter';

export default defineConfig([
  gtLint.configs.recommended,
]);

Diese erste Version bietet grundlegende Linting-Funktionen für Übersetzungsmuster im React Core. Zukünftige Versionen werden die Regelabdeckung erweitern und automatische Korrekturen für weitere gängige Verstöße hinzufügen.

Weiterführende Ressourcen

• Variable Components - Dynamische Inhalte in Übersetzungen handhaben
• String Translation - Einfache Textstrings übersetzen