Extrahieren von i18n-Schlüsseln mit KI

Die Umstellung einer bestehenden React-App zur Unterstützung mehrerer Sprachen ist manchmal ein mühsamer Prozess, bei dem hartcodierte Zeichenketten gefunden und durch Übersetzungsschlüssel ersetzt werden müssen.

Lingo.dev CLI arbeitet nahtlos mit KI-gestützten IDEs wie Cursor, GitHub Copilot und ähnlichen Tools zusammen, um die Extraktion übersetzbarer Inhalte aus Ihren React-Komponenten zu automatisieren.

Das unten erläuterte Konzept kann für jeden Tech-Stack verwendet werden, aber der Einfachheit halber und um die Idee zu demonstrieren, verwenden wir eine Hello-World-React-App als Beispiel.

Voraussetzungen

Bevor Sie Schlüssel extrahieren, richten Sie die grundlegende Internationalisierung in Ihrer React-App ein. Vollständige Einrichtungsanweisungen finden Sie in der react-intl-Dokumentation.

Nach Befolgung der Internationalisierungseinrichtung für Ihren Tech-Stack sollte Ihr Projekt Folgendes aufweisen:

  • Die Möglichkeit, dynamisch zwischen Sprachen in der App zu wechseln
  • Grundlegende Projektstruktur zur Organisation von Übersetzungsdateien

Einrichtungsprozess

Installieren und konfigurieren Sie Lingo.dev CLI:

npx lingo.dev@latest init

Erstellen Sie eine leere Quelldatei:

mkdir -p src/locales
echo '{}' > src/locales/en.json

Konfigurieren Sie i18n.json:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

Extrahieren von Schlüsseln mit KI

Wählen Sie Ihre React-Komponente und verwenden Sie Ihre KI-IDE, um hartcodierte Zeichenketten zu extrahieren:

Vor der Extraktion:

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

Anforderungen für die Extraktion:

  1. Ersetzen Sie hartcodierte Zeichenketten durch react-intl-Hooks und -Komponenten
  2. Verwenden Sie ICU-Formatierung für Variablen und Pluralformen
  3. Strukturieren Sie Schlüssel hierarchisch nach Komponentenorganisation
  4. Fügen Sie alle Schlüssel zur Quell-JSON-Datei hinzu
  5. Halten Sie konsistente Namenskonventionen ein

KI-Prompt:

Extrahieren Sie alle hartcodierten Zeichenketten aus React-Komponenten und:

1. Ersetzen Sie mit react-intl:
   - Verwenden Sie useIntl-Hook für dynamische Zeichenketten
   - Verwenden Sie FormattedMessage für statischen Text
   - Fügen Sie ICU-Formatierung für Variablen ({name}) und Pluralformen ({count}) hinzu

2. Strukturieren Sie Übersetzungsschlüssel:
   - Gruppieren Sie nach Komponentenhierarchie (components.*, pages.*)
   - Verwenden Sie beschreibende, verschachtelte Schlüssel (header.nav.home)
   - Passen Sie die Komponentenstruktur in JSON an

3. Aktualisieren Sie Locales:
   - Fügen Sie alle Schlüssel zu src/locales/en.json hinzu
   - Halten Sie konsistente Benennung in der gesamten App ein

Nach der KI-Extraktion:

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

Generierte en.json:

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

Batch-Verarbeitung

Für mehrere Komponenten wählen Sie alle Dateien aus und verwenden denselben umfassenden Prompt. KI-IDEs wie Cursor, GitHub Copilot und andere können mehrere Dateien gleichzeitig verarbeiten und dabei eine konsistente Schlüsselbenennung in Ihrer Anwendung beibehalten.

Übersetzungsgenerierung

Sobald Ihre KI-IDE die Schlüssel extrahiert hat, generieren Sie Übersetzungen:

npx lingo.dev@latest i18n

Dies erstellt übersetzte Versionen Ihrer Quelldatei:

src/locales/
  en.json    (Quelle mit extrahierten Schlüsseln)
  es.json    (Spanische Übersetzungen)
  fr.json    (Französische Übersetzungen)
  de.json    (Deutsche Übersetzungen)

Validierung

Überprüfen Sie nach der Extraktion Ihre Einrichtung:

Überprüfen Sie die Übersetzungsabdeckung:

npx lingo.dev@latest i18n --frozen

Dieser Befehl schlägt fehl, wenn Übersetzungen fehlen, und gewährleistet so eine vollständige Abdeckung.

Testen Sie mit verschiedenen Locales:

// Wechseln Sie die Locale in Ihrer App, um zu überprüfen, ob die Übersetzungen funktionieren
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>