Translation Inspector

A powerful VS Code extension for managing translations in Laravel/Vue projects with multi-language support, AI-powered translation, team collaboration, and quality checks.

🎯 Why Translation Inspector?

• ✅ Save time - Edit translations without switching files
• ✅ Scale easily - Handle thousands of translation keys efficiently
• ✅ AI-powered - Auto-translate missing keys with Google Translate or DeepL

📸 Screenshots

Note: Add screenshots to media/screenshots/ folder and update these links

Features

🎯 Core Features

• 🔍 Automatic detection of translation keys in .php, .vue, .js, .blade.php files
• 📝 Inline editing of translations directly in the sidebar
• 🌍 Multi-language support (FR, EN, ES, DE, IT, NL, PT, RU, ZH, JA)
• 🔎 Real-time Search
• 🎨 Theme support - Automatically adapts to VS Code light/dark theme
• 📄 Scope toggle between active file and entire project

📤 Import/Export

• 📤 Export to CSV - Export all translations for external usage
• 📥 Import from CSV - Import translated content back into your project

🤖 AI-Powered Translation

• 🤖 Auto-translate missing translations using Google Translate (Free/API) or DeepL
• ⚡ Bulk translate all missing keys with one click

🚀 Productivity Tools

• ☑️ Bulk operations - Select and delete/copy multiple translations at once
• ⚡ Quick Open (Ctrl+P) - Quickly search and navigate to any translation key
• ↩️ History & Undo - View change history and undo modifications

⚡ Performance

• 💾 Smart caching - Automatic caching with file change detection
• 🚀 Optimized loading - Fast performance even with large translation files
• ⚡ Optimized UI - No full reload on edits for smoother experience

Usage

1. Open a Laravel/Vue project in VS Code
2. Click on the Translation Inspector icon in the sidebar (🌐)
3. Open a file containing translation keys like __('key'), $t('key'), or @lang('key')
4. The panel displays all detected keys with their translations

View Modes

• 📄 Active file: Shows only translations used in the current file (default)
• 📁 All project: Shows all translations defined in the project

Toolbar Actions

• 📁 All project / 📄 Active file: Toggle scope
• 🔄 Refresh: Reload translations
• ⚠️ Missing only: Filter to show only incomplete translations
• 🤖 Auto-translate: Automatically translate all missing keys using AI
• 📤 Export CSV / 📥 Import CSV: Manage external translations
• 📜 History / ↩️ Undo: Manage changes
• Bulk actions: Delete or Copy selected keys

Per-Key Actions

• 🔍: Find all usages of the key in the project
• 🇫🇷 🇬🇧 ...: Open the translation file and navigate to the key definition
• Translation Buttons: Quickly translate missing values between Main languages (e.g. FR <-> EN)

Configuration

Configure the extension in VS Code settings:

{
  "translationInspector.languages": ["fr", "en", "es", "de"],
  "translationInspector.translationProvider": "google",  // or "deepl"
  "translationInspector.translationApiKey": "your-api-key-here",
  "translationInspector.translationSourceLang": "en"
}

Available settings:

• languages: Array of language codes to display (default: ["fr", "en"])
• translationProvider: AI translation provider - "google" or "deepl" (default: "google")
• translationApiKey: API key for the translation service
• translationSourceLang: Source language for auto-translation (default: "en")

Requirements

• PHP must be available in PATH (for reading PHP translation files)
• Translation files should be in lang/ directory:
  • JSON: lang/{locale}.json
  • PHP: lang/{locale}/*.php

Notes

• Supports both flat keys ("Welcome": "Bienvenue") and nested objects ({ "auth": { "login": "Connexion" } })
• Handles keys with dots in their names (e.g., "I have a. Dot" vs auth.password)
• Supports ternary expressions: $t(condition ? 'key1' : 'key2')