AutoLocale is a powerful VS Code extension for managing localization in Angular projects using ngx-translate. It scans your codebase for translation keys, helps insert and edit them inline, and offers an intuitive UI to manage, validate, and sync translations across multiple language files.
🚀 Features
✨ Inline Translation Pipe Detection
Highlights {{ 'key' | translate }} in HTML and this.translate.transform('key') in TypeScript.
🖱️ Cursor-Aware Popup Editor
Displays a webview editor to instantly view and update translations when your cursor lands on a translation pipe.
➕ Insert Translation Pipe
Instantly insert a pre-filled translation pipe at the cursor location with smart cursor positioning.
📁 Automatic Translation File Discovery
Scans your workspace for *.json translation files across common folders (/i18n, /locales, /lang, etc.).
✏️ Edit & Save Translations
Easily update translations in multiple languages using an interactive form interface.
✅ Validation & Consistency Checks
Detects:
Missing translations across language files
Duplicate keys
Conflicting values for the same key
Non-nested vs flat key inconsistencies
📤 Export Translations to CSV
Export selected or all language keys to a CSV with full UTF-8 BOM support (Excel-compatible).
📥 Import Translations from CSV
Merge translated keys/values from a CSV file back into their respective language JSON files.
🧩 Quick Command Menu
Access all features through a simple, searchable menu in the status bar.
📦 Installation
Open Visual Studio Code.
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X).
Search for AutoLocale or Scan Translation Pipes.
Click Install and reload VS Code.
🛠️ Usage
🔍 Detect & Highlight Translation Pipes
Open any .html or .ts file — translation pipes are automatically highlighted.
Placing the cursor inside a pipe opens a popup translation editor.
✍️ Edit Translations
Modify translation keys or values directly from the popup.
All detected language files are updated accordingly.
➕ Insert Translation Pipe
Run Insert Translation Pipe from the Command Palette.
A new key like new.translation.key will be inserted at the cursor.
🧭 Manage Translation Files
JSON translation files are auto-detected by language name (en.json, fr.json, etc.).
Keys are synced across all files.
✅ Validate Translations
Run Validate Translations to check for:
🔸 Missing keys
🔸 Duplicate entries
🔸 Key formatting issues
🔸 Inconsistencies across language files
Fix problems interactively with in-editor prompts.
📤 Export / 📥 Import
Use Export Translations (CSV) to save keys/values to CSV (semicolon-delimited).
Use Import Translations (CSV) to sync values from CSV back to JSON files.
💻 Commands
Command
Description
Insert Translation Pipe
Insert a new translate pipe at the cursor position.
Validate Translations
Check translation files for missing/duplicate keys.
Export Translations (CSV)
Save translations into a CSV file.
Import Translations (CSV)
Load and merge translations from a CSV file.
Scan Translation Files
Re-scan the workspace for translation files.
⚙️ Configuration & File Naming
Translation files should follow naming conventions such as:
en.json
fr.json
es-ES.json
They should reside in standard folders such as:
/i18n/
/locales/
/lang/
The extension automatically discovers and manages these files.
📋 Requirements
VS Code v1.60 or higher
Angular project using @ngx-translate/core
JSON-based translation files
⚠️ Known Issues
Large translation files may reduce performance when scanning or validating.
Dynamic translation keys (e.g., via variables) are not currently supported.
🤝 Contributing
Found a bug? Have an idea?
Open an issue or submit a pull request!
