Je vais être honnête. J'avais l'habitude de redouter les parties i18n de mes projets. Non pas parce que le concept est difficile, mais parce que le flux de travail était juste... fastidieux. Copier des chaînes ici, les coller là, changer de contexte entre votre code et un tableau de bord web, attendre les traductions, télécharger les fichiers, réaliser que vous avez oublié une chaîne, répéter.
Le mois dernier, j'ai commencé à utiliser Cursor pour un projet parallèle qui nécessitait le support de l'espagnol et du français. Ce qui s'est passé ensuite m'a sincèrement surpris, et je voulais partager la configuration qui fonctionne pour moi.
Une Confession Rapide
Avant de plonger : Je ne dis pas que cette approche est parfaite. Il y a des aspérités que je soulignerai en cours de route. Mais comparé à mon ancien flux de travail consistant à jongler manuellement avec des fichiers JSON et à utiliser Google Translate pour les premiers brouillons ? C'est le jour et la nuit.
Ce Qui Rend Cursor Différent pour l'i18n
Si vous n'êtes pas familier avec Cursor, c'est essentiellement VS Code avec de l'IA intégrée. J'étais sceptique au début ("un autre éditeur de code IA, super"). Mais le support MCP (Model Context Protocol) est ce qui a changé la donne pour moi.
MCP permet au Claude de Cursor de se connecter à des services externes. Pensez-y comme donner des mains à l'IA pour faire réellement des choses, pas juste suggérer du code. Pour le travail de traduction, cela signifie que Claude peut :
- Créer réellement des clés de traduction dans votre TMS
- Récupérer les traductions existantes
- Pousser les nouvelles
- Vérifier ce qui manque
C'est la partie "faire réellement des choses" qui compte. J'utilise Copilot depuis des années, et bien qu'il soit excellent pour suggérer t('some.key'), il ne peut pas réellement créer cette clé nulle part.
Mon Ancien Flux de Travail (Le Douloureux)
Voici à quoi ressemblait l'ajout d'une nouvelle fonctionnalité avec des traductions pour moi :
- Écrire le composant avec des chaînes en anglais
- Réaliser à mi-chemin que je devrais les extraire vers des clés de traduction
- Ouvrir mes fichiers JSON de traduction dans un autre onglet
- Passer trop de temps à trouver des noms de clés (est-ce
button.submitouform.submitButton?) - Ajouter les valeurs anglaises, les copier dans chaque fichier de langue
- Passer au tableau de bord de notre TMS dans le navigateur
- Y créer les mêmes clés (oui, encore)
- Attendre l'équipe de traduction ou exécuter une traduction automatique
- Télécharger les fichiers traduits
- Tester la fonctionnalité et découvrir que j'ai manqué trois chaînes
- Juronner dans ma barbe et répéter toute la danse
Je me suis chronométré une fois. Ajouter le support i18n à un composant de 200 lignes m'a pris 45 minutes. Les changements de code réels ? Peut-être 5 minutes. Le reste était purement des frais généraux.
Le Nouveau Flux de Travail
Maintenant, je dis juste à Claude ce que je veux. Voici un exemple réel de la semaine dernière :
J'avais un composant de paiement avec des chaînes codées en dur. J'ai sélectionné le code, ouvert Claude (Cmd+L), et tapé :
"Extract the hardcoded strings here to translation keys using react-i18next. Use the checkout namespace."
Claude a mis à jour mon composant ET créé les clés dans IntlPull. Les valeurs anglaises étaient déjà là. Je lui ai demandé de traduire en espagnol et en français, j'ai attendu environ 30 secondes, et tout était synchronisé.
Cette même tâche qui prenait 45 minutes ? Peut-être 3 minutes maintenant. Et honnêtement, la plupart du temps, c'était moi revoyant le travail de Claude.
Mettre Cela En Place
D'accord, passons à la configuration réelle. Avertissement : MCP est encore relativement nouveau, alors attendez-vous à quelques bizarreries.
Installer le Serveur MCP
Vous aurez besoin de Node.js installé (je suis sur la v20, ça marche bien). Installez le serveur MCP globalement :
npm install -g @intlpullhq/mcp-server
Configurer Cursor
Cette partie m'a fait trébucher la première fois. Dans Cursor :
- Ouvrez les Paramètres (Cmd+, sur Mac)
- Trouvez MCP Servers
- Ajoutez le @intlpullhq/mcp-server avec votre clé API
Vous pouvez aussi éditer ~/.cursor/mcp.json directement si vous préférez cette méthode. J'ai fini par faire ça parce que l'interface utilisateur était un peu capricieuse pour moi.
Vérifier Que Ça Marche
Ouvrez le chat Claude dans Cursor (Cmd+L) et demandez quelque chose comme :
"Can you check my IntlPull connection and list my projects?"
Si vous voyez vos projets listés, vous êtes bon.
Flux de Travail Qui Aident Vraiment
Extraire des Chaînes du Code Existant
C'est probablement mon flux de travail le plus utilisé. Sélectionnez un composant, dites à Claude :
"Extract these hardcoded strings to translation keys and update the component to use react-i18next"
Ce que j'aime : Claude choisit des noms de clés raisonnables et les structure logiquement.
Ce qu'il faut surveiller : Parfois, il devient créatif avec les espaces de noms. Je spécifie toujours l'espace de noms que je veux maintenant pour éviter le nettoyage plus tard.
Traduire le Contenu Manquant
Quand vous avez ajouté de nouvelles chaînes en anglais et avez besoin de traductions :
"Translate all missing strings to Spanish and French"
Celui-ci fonctionne assez bien. Les traductions sont décentes pour la plupart des textes d'interface utilisateur. Pour tout ce qui est nuancé (texte marketing, texte juridique), je recommande toujours une révision humaine.
Ajouter une Nouvelle Langue
J'ai eu un client qui a demandé le support de l'allemand en plein projet. Au lieu d'y passer un après-midi :
"Add German to the project and translate all existing strings"
Il a tout géré : mise à jour du projet IntlPull, exécution des traductions, le tout. M'a probablement fait économiser 2-3 heures.
Trouver les Traductions Longues
Celui-ci est plus subtil mais super utile. Les traductions allemandes et finnoises ont tendance à être plus longues que l'anglais. J'ai demandé :
"Show me all translations that might be too long for typical UI buttons"
Claude a regardé les clés, identifié celles probablement utilisées dans des boutons basées sur les modèles de nommage, et a signalé quelques traductions allemandes qui faisaient 30+ caractères. M'a aidé à éviter un bug de mise en page avant qu'il n'atteigne la production.
Choses Qui Ne Marchent Pas Super (Encore)
Je veux être franc sur les limitations :
Pluralisation complexe : Claude gère bien les pluriels de base, mais les langues comme l'arabe avec leurs six formes plurielles ? Vous voudrez vérifier celles-là.
Traductions hautement contextuelles : Si une chaîne peut signifier différentes choses dans différents contextes (comme "Save" comme verbe vs nom), l'IA pourrait choisir la mauvaise. Ajouter des descriptions contextuelles aide.
Opérations par lots importantes : J'ai essayé de renommer 200+ clés d'un coup. Cursor a commencé à ramer et j'ai dû le diviser en lots plus petits. Gardez les opérations sous les 50 clés environ pour que tout se passe bien.
Travail hors ligne : Nécessite évidemment une connexion internet. Si vous êtes souvent en avion, le flux de travail traditionnel par fichiers JSON a toujours sa place.
Conseils issus de l'Essai et l'Erreur
Après quelques semaines d'utilisation quotidienne, voici ce que j'ai appris :
Soyez spécifique sur les conventions de nommage dès le départ. Dites à Claude : "When creating keys, use the format page.section.element" avant de commencer. Évite le refactoring plus tard.
Révisez toujours avant de pousser. Demandez "Show me all changes before pushing to IntlPull" pour voir ce qui va se passer. J'ai attrapé quelques noms de clés bizarres de cette façon.
Utilisez des branches de traduction pour les fonctionnalités. Si vous travaillez sur une grosse fonctionnalité, créez une branche de traduction en premier. Garde vos traductions principales propres pendant que vous itérez.
Ajoutez du contexte pour les traducteurs humains. Même si l'IA gère la traduction initiale, vos traducteurs humains finiront par revoir les choses. Les descriptions contextuelles facilitent leur travail.
Comparaison avec D'autres Configurations
J'ai essayé quelques approches différentes :
VS Code simple + fichiers JSON : Fonctionne toujours, juste lent. Pas de honte à cela si votre projet est petit.
i18n intégré de WebStorm : Outils d'extraction décents, mais pas de traduction IA. Bon pour les équipes qui ne veulent pas d'IA dans leur flux.
Interfaces web TMS dédiées : Bien pour les traducteurs et les PMs, douloureux pour les développeurs qui vivent dans leur IDE.
Cursor + MCP : Meilleure expérience développeur que j'ai trouvée, mais nécessite d'être à l'aise avec les outils IA et un peu de temps de configuration.
Référence Rapide
Une fois que vous êtes configuré, voici des prompts qui fonctionnent bien :
Pour les choses liées au projet :
"List my translation projects""Switch to project mobile-app"
Pour gérer les clés :
"Create a key errors.network with value 'Network error'""Find all keys containing 'button'"
Pour les traductions :
"Translate missing strings to Spanish""Show translations for the checkout namespace""Pull latest translations"
Enseigner l'i18n à Votre Assistant IA
Voici quelque chose qui a encore amélioré mon flux de travail : donner à l'IA le contexte sur la façon dont je veux que les traductions soient gérées. La plupart des éditeurs alimentés par l'IA prennent en charge une certaine forme d'instructions spécifiques au projet.
Règles Cursor (.cursorrules)
Créez un fichier .cursorrules à la racine de votre projet :
# i18n Guidelines
When working with translations:
- Always use react-i18next for this project
- Namespace format: feature.section.element (e.g., checkout.form.submitButton)
- Never hardcode user-facing strings
- Use IntlPull MCP for key management
- For plurals, use ICU message format
- Keep key names in English, values localized
Claude Code (CLAUDE.md)
Si vous utilisez Claude Code CLI, ajoutez à votre CLAUDE.md :
MARKDOWN1## i18n Workflow 2- Use IntlPull for translation management 3- Run `npx @intlpullhq/cli upload` after adding new keys 4- Translation keys follow: namespace.section.element 5- Always add context descriptions for translators
Vous pouvez même créer une commande slash personnalisée. Ajoutez à votre configuration Claude Code :
JSON1{ 2 "skills": [{ 3 "name": "translate", 4 "description": "Translate missing strings", 5 "prompt": "Use IntlPull MCP to find and translate all missing strings to ${language}" 6 }] 7}
Puis tapez juste /translate Spanish et regardez-le travailler.
Windsurf (.windsurfrules)
Concept similaire :
When handling internationalization:
1. Extract hardcoded strings to translation keys
2. Use IntlPull MCP for key management
3. Follow the project's naming conventions
4. Add descriptions for context
VS Code Copilot (.github/copilot-instructions.md)
MARKDOWN1# Translation Guidelines 2- Use i18next for all user-facing text 3- Create keys via IntlPull when available 4- Format: feature.component.element
La beauté de ces fichiers d'instructions est qu'ils persistent entre les sessions. Chaque fois que l'IA vous aide avec du code, elle connaît déjà vos préférences i18n.
Pensées Finales
Je ne vais pas prétendre que cette configuration est pour tout le monde. Si vous travaillez sur un tout petit projet avec une seule langue, c'est excessif. Si votre entreprise a des politiques strictes concernant les outils d'IA, vous devrez d'abord naviguer à travers cela.
Mais pour les développeurs indépendants, les petites équipes, ou quiconque en a assez de la danse traditionnelle de l'i18n, ce flux de travail a véritablement changé ma façon de travailler. La charge cognitive du changement de contexte a disparu. Je reste dans mon éditeur, je reste dans mon flux, et les traductions... arrivent simplement.
Si vous voulez essayer vous-même, IntlPull a un niveau gratuit qui inclut l'accès MCP. Cursor est également gratuit pour une utilisation de base. La configuration prend peut-être 15 minutes si vous ne rencontrez pas d'accrocs.
La combinaison des outils MCP + instructions IA signifie que votre éditeur comprend réellement votre flux i18n. Ce n'est plus juste de l'auto-complétion ; c'est un coéquipier qui connaît vos conventions et peut les exécuter.
Vaut la peine d'expérimenter, surtout si vous avez un nouveau projet qui démarre bientôt.
