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 fest codierte Strings gefunden und durch Übersetzungsschlüssel ersetzt werden müssen.

Die Lingo.dev CLI funktioniert nahtlos mit KI-gestützten IDEs wie Cursor, GitHub Copilot und ähnlichen Tools, um die Extraktion von übersetzbaren Inhalten aus Ihren React-Komponenten zu automatisieren.

Das unten erläuterte Konzept kann für jeden Tech-Stack verwendet werden, aber zur Vereinfachung und zur Demonstration der Idee verwenden wir als Beispiel eine Hello-World-React-App.

Voraussetzungen

Richten Sie vor dem Extrahieren von Schlüsseln die grundlegende Internationalisierung in Ihrer React-App ein. Vollständige Setup-Anweisungen finden Sie in der react-intl-Dokumentation.

Nachdem Sie das Internationalisierungs-Setup für Ihren Tech-Stack durchgeführt haben, sollte Ihr Projekt Folgendes aufweisen:

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

Setup-Prozess

Installieren und konfigurieren Sie die 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 aus und verwenden Sie Ihre KI-IDE, um fest codierte Strings 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 fest codierte Strings durch react-intl-Hooks und -Komponenten
  2. Verwenden Sie ICU-Formatierung für Variablen und Plurale
  3. Strukturieren Sie Schlüssel hierarchisch nach Komponentenorganisation
  4. Fügen Sie alle Schlüssel zur Quell-JSON-Datei hinzu
  5. Behalten Sie konsistente Namenskonventionen bei

KI-Prompt:

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

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"
}

Stapelverarbeitung

Für mehrere Komponenten wählen Sie alle Dateien aus und verwenden Sie 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 aufrechterhalten.

Übersetzungsgenerierung

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

npx lingo.dev@latest run

Dies erstellt übersetzte Versionen Ihrer Quelldatei:

src/locales/
  en.json    (source with extracted keys)
  es.json    (Spanish translations)
  fr.json    (French translations)
  de.json    (German translations)

Validierung

Überprüfen Sie nach der Extraktion Ihr Setup:

Übersetzungsabdeckung prüfen:

npx lingo.dev@latest run --frozen

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

Mit verschiedenen Locales testen:

// Switch locale in your app to verify translations work
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>