Internationalization Helper
Helps manage internationalization (i18n) and localization (l10n) in multi-language applications.
When to Use
- User requests i18n support
- Adding new languages
- Finding untranslated strings
- Managing translation files
- User mentions "translation", "i18n", "l10n", "locale"
Instructions
1. Detect i18n Framework
JavaScript/React:
- react-i18next
- react-intl (FormatJS)
- i18next
- LinguiJS
Vue:
- vue-i18n
Python:
- gettext
- Django i18n
- Flask-Babel
Ruby/Rails:
- I18n gem (built-in)
Look for imports, config files, or translation directories.
2. Find Hardcoded Strings
Search for untranslated text:
// Bad: Hardcoded
<button>Submit</button>
<p>Welcome, {user.name}!</p>
// Good: Translated
<button>{t('common.submit')}</button>
<p>{t('welcome.message', { name: user.name })}</p>
Search patterns:
- Strings in JSX/template tags
- Alert/error messages
- Form labels and placeholders
- Button text
- Validation messages
Exclude: code comments, console.log, test strings
3. Extract to Translation Files
React-i18next format (JSON):
{
"common": {
"submit": "Submit",
"cancel": "Cancel"
},
"welcome": {
"message": "Welcome, {{name}}!"
}
}
Gettext format (.po):
msgid "submit_button"
msgstr "Submit"
msgid "welcome_message"
msgstr "Welcome, %(name)s!"
4. Organize Translation Keys
Best practices:
- Namespace by feature:
users.profile.title - Group common strings:
common.buttons.save - Describe context, not content:
errors.login.invalidnoterrors.wrong_password - Consistent naming convention
5. Check Translation Coverage
Compare locale files to find missing translations:
en.json: 150 keys
es.json: 142 keys (missing 8)
fr.json: 150 keys ✓
Missing in es.json:
- users.profile.bio
- settings.privacy.title
[...]
6. Handle Pluralization
Different languages have different plural rules:
// react-i18next
t('items', { count: 0 }) // "0 items"
t('items', { count: 1 }) // "1 item"
t('items', { count: 5 }) // "5 items"
// Translation file
{
"items_zero": "{{count}} items",
"items_one": "{{count}} item",
"items_other": "{{count}} items"
}
7. Date, Time, Number Formatting
Use locale-aware formatting:
// Numbers
const price = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(29.99);
// Dates
const date = new Intl.DateTimeFormat('fr-FR').format(new Date());
8. RTL (Right-to-Left) Support
For Arabic, Hebrew:
- CSS:
direction: rtl; - HTML:
<html dir="rtl"> - Logical properties:
margin-inline-startinstead ofmargin-left
9. Generate Translation Template
Create template for new locale:
# Copy keys from base language, empty values
cp locales/en.json locales/de.json
# Mark for translation
10. Best Practices
- Keep translations in separate files
- Use keys, not source text as keys
- Provide context to translators
- Test with long strings (German often longer)
- Use ICU MessageFormat for complex strings
- Avoid concatenating translated strings
- Extract all user-facing text
Supporting Files
templates/i18n-config.js: Configuration examplestemplates/locale-file.json: Translation file template