The Scan Translation Pipes extension for VS Code enhances development by detecting, highlighting, and managing translation keys used with Angular's translate pipe. It provides an easy way to insert, edit, and manage translation keys directly within your code editor.
Features
Automatic Translation Pipe Detection: Highlights translation pipes in HTML and TypeScript files.
Cursor-Based Translation Editor: Displays a popup when the cursor is inside a translation pipe, allowing you to edit translation keys.
Insert Translation Pipe: Quickly insert a new translation pipe with a default key.
Translation File Scanning: Automatically detects and manages translation JSON files in your project.
Modify Translations in Multiple Languages: Provides an intuitive UI to edit and save translations for multiple languages.
Installation
Open VS Code.
Go to the Extensions Marketplace (Ctrl+Shift+X / Cmd+Shift+X).
Search for "Scan Translation Pipes".
Click "Install" and reload VS Code if necessary.
Usage
1. Detecting and Highlighting Translation Pipes
When you open an HTML or TypeScript file, the extension scans for translation pipes ({{ 'key' | translate }}) and highlights them.
Clicking on a highlighted translation pipe opens an inline editor.
2. Inserting a Translation Pipe
Press Ctrl+Shift+P / Cmd+Shift+P and run Insert Translation Pipe.
A default translation key (new.translation.key) will be inserted.
Edit the key as needed.
3. Editing Translation Keys
Place the cursor inside a translation pipe ({{ 'key' | translate }}) to trigger a popup.
Modify the key or translations and save changes.
4. Managing Translation Files
The extension automatically scans for JSON translation files (*.json) and detects languages.
When a key is updated, it applies changes to all detected translation files.
Commands
Command
Description
extension.insertTranslationPipe
Inserts a new translation pipe at the cursor position.
Configuration
This extension automatically scans for translation files in the workspace. To ensure proper detection, your JSON translation files should be named using standard language codes (e.g., en.json, fr.json).
Requirements
Visual Studio Code v1.60+
A workspace containing Angular projects using the ngx-translate library.
Known Issues
Large translation files may cause performance issues when scanning.
Currently does not support dynamically generated translation keys.
Contributing
If you find a bug or have suggestions for improvements, feel free to open an issue or submit a pull request on GitHub.
