Angular Translation Navigator

Navigate seamlessly from Angular template translation keys to their JSON translations with multi-language support.

Features

✨ Multi-Language Support: Configure multiple language folders (French, English, Arabic, etc.)

🔍 Auto-Discovery: Automatically scans and loads ALL JSON files in language folders

🎯 Multiple Navigation Methods:

• Ctrl+Click (Go to Definition)
• Ctrl+Shift+T (Keyboard shortcut)
• Code Lens (Clickable links above keys)

💡 Smart Hover: Preview translations from all languages on hover

🚀 Works in HTML & TypeScript: Full support for both file types

⚡ Special Characters: Supports keys with &, -, _ (e.g., SHARED.GENERAL.REOPEN_&_ASSIGN)

Demo

Usage

1. Configure Language Folders

Add to your .vscode/settings.json:

{
  "angularTranslationNavigator.translationFolders": [
    {
      "language": "French",
      "folderPath": "resources/assets/i18n/fr"
    },
    {
      "language": "English",
      "folderPath": "resources/assets/i18n/en"
    },
    {
      "language": "Arabic",
      "folderPath": "resources/assets/i18n/ar"
    }
  ]
}

2. Navigate to Translations

Method 1: Ctrl+Click

• Hold Ctrl (or Cmd on Mac) and click any translation key
• Choose the language from the picker

Method 2: Keyboard Shortcut

• Place cursor on translation key
• Press Ctrl+Shift+T (or Cmd+Shift+T on Mac)

Method 3: Code Lens

• Click "Go to translation" link above the key

3. Hover for Preview

• Hover over any translation key
• See translations from all configured languages

Configuration

Requirements

• VSCode 1.60.0 or higher
• Angular project using ngx-translate or similar i18n solution

Known Issues

None at the moment. Report issues here

Release Notes

1.0.0

Initial release with:

• Multi-language folder support
• Auto-scanning of JSON files
• HTML & TypeScript support
• Special character support
• Multiple navigation methods

License

MIT

Enjoy! 🎉