Extraction de clés i18n avec l'IA

Convertir une application React existante pour prendre en charge plusieurs langues est parfois un processus fastidieux consistant à trouver des chaînes codées en dur et à les remplacer par des clés de traduction.

Lingo.dev CLI fonctionne de manière transparente avec les IDE alimentés par l'IA comme Cursor, GitHub Copilot et des outils similaires pour automatiser l'extraction du contenu traduisible de vos composants React.

Le concept expliqué ci-dessous peut être utilisé pour n'importe quelle pile technologique, mais pour plus de simplicité et pour démontrer l'idée, nous utiliserons une application React hello world comme exemple.

Prérequis

Avant d'extraire les clés, configurez l'internationalisation de base dans votre application React. Pour des instructions de configuration complètes, consultez la documentation react-intl.

Après avoir suivi la configuration de l'internationalisation pour votre pile technologique, votre projet devrait avoir :

  • Capacité de basculer entre les langues de manière dynamique dans l'application
  • Structure de projet de base pour organiser les fichiers de traduction

Processus de configuration

Installer et configurer Lingo.dev CLI :

npx lingo.dev@latest init

Créer un fichier source vide :

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

Configurer i18n.json :

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

Extraction de clés avec l'IA

Sélectionnez votre composant React et utilisez votre IDE IA pour extraire les chaînes codées en dur :

Avant l'extraction :

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>
  );
}

Exigences pour l'extraction :

  1. Remplacer les chaînes codées en dur par des hooks et composants react-intl
  2. Utiliser le formatage ICU pour les variables et les pluriels
  3. Structurer les clés de manière hiérarchique selon l'organisation des composants
  4. Ajouter toutes les clés au fichier JSON source
  5. Maintenir des conventions de nommage cohérentes

Prompt IA :

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

Après l'extraction par l'IA :

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>
  );
}

Fichier en.json généré :

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

Traitement par lots

Pour plusieurs composants, sélectionnez tous les fichiers et utilisez la même invite complète. Les IDE IA comme Cursor, GitHub Copilot et d'autres peuvent traiter plusieurs fichiers simultanément, en maintenant une nomenclature cohérente des clés dans toute votre application.

Génération des traductions

Une fois que votre IDE IA a extrait les clés, générez les traductions :

npx lingo.dev@latest run

Cela crée des versions traduites de votre fichier source :

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

Validation

Après l'extraction, vérifiez votre configuration :

Vérifiez la couverture des traductions :

npx lingo.dev@latest run --frozen

Cette commande échoue si des traductions sont manquantes, garantissant ainsi une couverture complète.

Testez avec différentes locales :

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