Extraction des clés i18n avec l'IA

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

Lingo.dev CLI fonctionne parfaitement 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 simplifier et 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 complètes de configuration, consultez la documentation react-intl.

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

  • La capacité de basculer dynamiquement entre les langues dans l'application
  • Une 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 des 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 hiérarchiquement 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 :

Extrayez toutes les chaînes codées en dur des composants React et :

1. Remplacez avec react-intl :
   - Utilisez le hook useIntl pour les chaînes dynamiques
   - Utilisez FormattedMessage pour le texte statique
   - Ajoutez le formatage ICU pour les variables ({name}) et les pluriels ({count})

2. Structurez les clés de traduction :
   - Regroupez par hiérarchie de composants (components.*, pages.*)
   - Utilisez des clés descriptives et imbriquées (header.nav.home)
   - Faites correspondre la structure des composants dans le JSON

3. Mettez à jour les locales :
   - Ajoutez toutes les clés à src/locales/en.json
   - Maintenez une nomenclature cohérente dans toute l'application

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 d'IA comme Cursor, GitHub Copilot et autres peuvent traiter plusieurs fichiers simultanément, en maintenant une nomenclature cohérente des clés dans votre application.

Génération de traduction

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

npx lingo.dev@latest i18n

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

src/locales/
  en.json    (source avec les clés extraites)
  es.json    (traductions en espagnol)
  fr.json    (traductions en français)
  de.json    (traductions en allemand)

Validation

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

Vérifiez la couverture de traduction :

npx lingo.dev@latest i18n --frozen

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

Testez avec différentes locales :

// Changez la locale dans votre application pour vérifier que les traductions fonctionnent
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>