Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**Exigences pour l'extraction :**\n\n1. Remplacer les chaînes codées en dur par des hooks et des composants react-intl\n2. Utiliser le formatage ICU pour les variables et les pluriels\n3. Structurer les clés hiérarchiquement selon l'organisation des composants\n4. Ajouter toutes les clés au fichier JSON source\n5. Maintenir des conventions de nommage cohérentes\n\n**Prompt pour l'IA :**\n\n```\nExtraire toutes les chaînes codées en dur des composants React et :\n\n1. Remplacer avec react-intl :\n - Utiliser le hook useIntl pour les chaînes dynamiques\n - Utiliser FormattedMessage pour le texte statique\n - Ajouter le formatage ICU pour les variables ({name}) et les pluriels ({count})\n\n2. Structurer les clés de traduction :\n - Regrouper par hiérarchie de composants (components.*, pages.*)\n - Utiliser des clés descriptives et imbriquées (header.nav.home)\n - Faire correspondre la structure des composants dans JSON\n\n3. Mettre à jour les locales :\n - Ajouter toutes les clés à src/locales/en.json\n - Maintenir une nomenclature cohérente dans toute l'application\n```\n\n**Après l'extraction par l'IA :**\n\n```jsx\nimport { useIntl } from \"react-intl\";\n\nfunction WelcomeCard() {\n const intl = useIntl();\n\n return (\n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

\n );\n}\n```\n\n**Fichier en.json généré :**\n\n```json\n{\n \"welcome.title\": \"Welcome to our platform\",\n \"welcome.description\": \"Start your journey with us today\",\n \"welcome.getStarted\": \"Get started\"\n}\n```\n\n## Traitement par lots\n\nPour 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.\n\n## Génération de traduction\n\nUne fois que votre IDE d'IA a extrait les clés, générez les traductions :\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\nCela crée des versions traduites de votre fichier source :\n\n```bash\nsrc/locales/\n en.json (source avec les clés extraites)\n es.json (traductions en espagnol)\n fr.json (traductions en français)\n de.json (traductions en allemand)\n```\n\n## Validation\n\nAprès l'extraction, vérifiez votre configuration :\n\n**Vérifiez la couverture de traduction :**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\nCette commande échoue si des traductions sont manquantes, assurant ainsi une couverture complète.\n\n**Testez avec différentes locales :**\n\n```jsx\n// Changez la locale dans votre application pour vérifier que les traductions fonctionnent\n\n \n\n```\n","content","\nLa 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.\n\n**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.\n\nLe 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.\n\n## Prérequis\n\nAvant 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](https://formatjs.io/docs/react-intl/).\n\nAprès avoir suivi la configuration d'internationalisation pour votre pile technologique, votre projet devrait disposer de :\n\n- La capacité de basculer dynamiquement entre les langues dans l'application\n- Une structure de projet de base pour organiser les fichiers de traduction\n\n## Processus de configuration\n\n**Installer et configurer Lingo.dev CLI :**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**Créer un fichier source vide :**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**Configurer i18n.json :**\n\n```json\n{\n \"locale\": {\n \"source\": \"en\",\n \"targets\": [\"es\", \"fr\", \"de\"]\n },\n \"buckets\": {\n \"json\": {\n \"include\": [\"src/locales/[locale].json\"]\n }\n }\n}\n```\n\n## Extraction des clés avec l'IA\n\n**Sélectionnez votre composant React** et utilisez votre IDE IA pour extraire les chaînes codées en dur :\n\n**Avant l'extraction :**\n\n```jsx\nfunction WelcomeCard() {\n return (\n

Welcome to our platform

Start your journey with us today

\n \n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

Extraction des clés i18n avec l'IA