🚀 Translation Navigator

i18n key navigator

Navigate instantly between translation keys and files with smart auto-discovery, hover previews, and multi-namespace support. Perfect for large-scale internationalized React, Vue, and Angular applications.

✨ Features

🎯 Instant Navigation

• Go to Translation: Jump directly from t('key') or <Trans i18nKey="key" /> to the translation file
• Smart Key Detection: Automatically detects translation keys in your code
• Multi-file Support: Handles multiple translation files and locales seamlessly

🔍 Intelligent Discovery

• Auto-Discovery: Automatically finds all i18n folders in your project
• Custom Folders: Configure custom folder names (locales, translations, lang, etc.)
• Namespace Support: Handles complex namespace structures (deelIT:common.buttons.save)
• File Structure Intelligence: Adapts to different file organization patterns

💡 Developer Experience

• Hover Previews: See translation values without leaving your code
• Multi-locale Display: View translations in multiple languages at once
• Smart Tab Management: Reuses existing editor tabs instead of creating duplicates
• Context Menu Integration: Right-click to navigate to translations

🛠 Framework Support

• React: t('key'), <Trans i18nKey="key" />, useTranslation()
• Vue: $t('key'), i18next.t('key')
• Angular: Custom function names supported
• Any Framework: Configurable function detection

☕ Support the Project

If Translation Navigator has saved you time and improved your workflow, consider supporting its development:

🚀 Quick Start

1. Install the extension
2. Open a project with i18n files
3. Place cursor on any translation key like t('user.name')
4. Press Ctrl+Shift+P → "Go to Translation" or right-click → "Go to Translation"
5. Navigate instantly to the translation file with the key highlighted!

📁 Supported File Structures

The extension automatically adapts to various project structures:

📦 Your Project
├── 📁 src/
│   ├── 📁 i18n/           ← Auto-discovered
│   │   ├── 📁 en/
│   │   └── 📁 es/
│   └── 📁 locales/        ← Auto-discovered
├── 📁 packages/
│   └── 📁 shared/
│       └── 📁 i18n/       ← Auto-discovered
└── 📁 assets/
    └── 📁 translations/   ← Configurable

⚙️ Configuration

Auto-Discovery Settings

{
  "translationNavigator.enableAutoDiscovery": true,
  "translationNavigator.customFolderNames": ["i18n", "locales", "translations", "lang"],
  "translationNavigator.excludePatterns": ["**/node_modules/**", "**/dist/**"]
}

Manual Configuration

{
  "translationNavigator.translationSources": [
    {
      "namespace": "common",
      "folder": "src/i18n"
    },
    {
      "namespace": "admin", 
      "folder": "packages/admin/locales"
    }
  ]
}

Framework Customization

{
  "translationNavigator.functionNames": ["t", "i18next.t", "$t", "translate"],
  "translationNavigator.filePattern": "**/*.{json,yaml,yml}"
}

🎮 Usage Examples

React with react-i18next

// Navigate from any of these:
const { t } = useTranslation('common');
return (
  <div>
    <h1>{t('welcome.title')}</h1>           {/* ← Ctrl+Click here */}
    <Trans i18nKey="welcome.subtitle" />    {/* ← Or here */}
    <button>{t('buttons.save')}</button>    {/* ← Or here */}
  </div>
);

Vue with vue-i18n

<template>
  <div>
    <h1>{{ $t('user.profile.title') }}</h1>  <!-- ← Navigate from here -->
    <p>{{ $t('user.profile.description') }}</p>
  </div>
</template>

Namespace Support

// Automatic namespace detection
const { t } = useTranslation('admin');
t('users.create')  // → Resolves to admin:users.create

// Explicit namespace
t('common:buttons.save')  // → Resolves to common namespace

🔧 Commands

🎯 Pro Tips

1. Multi-Project Setup

Configure different namespaces for micro-frontends:

{
  "translationNavigator.translationSources": [
    { "namespace": "shell", "folder": "apps/shell/src/i18n" },
    { "namespace": "dashboard", "folder": "apps/dashboard/src/i18n" },
    { "namespace": "shared", "folder": "libs/shared/i18n" }
  ]
}

2. Custom File Patterns

Support YAML or other formats:

{
  "translationNavigator.filePattern": "**/*.{json,yaml,yml,js}"
}

3. Performance Optimization

Exclude unnecessary directories:

{
  "translationNavigator.excludePatterns": [
    "**/node_modules/**",
    "**/dist/**", 
    "**/coverage/**",
    "**/.next/**"
  ]
}

🚀 Why Translation Navigator?

⚡ Productivity Boost

• Save 5-10 minutes per day navigating translation files
• Reduce context switching between code and translation files
• Eliminate manual file searching in large projects

🎯 Enterprise Ready

• Multi-namespace support for complex applications
• Scalable architecture handles thousands of translation files
• Team-friendly with consistent navigation across developers

🛡️ Reliable & Fast

• Smart caching for instant navigation
• Cursor/VS Code optimized for smooth performance
• Zero configuration for most projects

📊 Perfect For

• ✅ Large React applications with react-i18next
• ✅ Vue.js projects with vue-i18n
• ✅ Angular applications with custom i18n
• ✅ Micro-frontend architectures with multiple namespaces
• ✅ Monorepo projects with shared translations
• ✅ Teams working on internationalized applications

🤝 Contributing

• ☕ Sponsor: Buy Me a Coffee

📄 License

MIT License - see LICENSE.txt for details.

Made with ❤️ for developers building global applications

Transform your i18n workflow today! 🌍