TranslationViewer
A Visual Studio Code extension to help developers easily view and manage i18n translation keys across multiple JSON files.
✨ Features
- 🧠 Hover Preview: Instantly see the value of a translation key on hover.
- 🌍 Multi-language Support: View translations across different languages side by side.
- 📁 JSON Support: Works with standard JSON translation files.
⚗️ More to come
- Commands: Commands for better UX.
- Jump to key: Jump from the hovered key in your code directly to the translation value.
📦 Installation
- Open Visual Studio Code.
- Go to the Extensions panel.
- Search for TranslationViewer.
- Click Install.
🚀 Usage
- Open your project containing translation files.
- Ensure your translations are stored in properly structured JSON files.
- Hover over translation keys in your code to preview values.
- Use the viewer to edit translations inline across different locales.
⚙️ Configuration
Add the following settings to your VS Code settings.json to configure translation file paths and default language:
{
"translationViewer.translationFiles": [
"de-DE.json",
"en-EN.json",
],
}
| Setting |
Description |
translationViewer.translationFiles |
Array of paths to your JSON translation files. |
translationViewer.prefix |
Prefix that is in front of the translation keys. |
translationViewer.filetypes |
Array of file types that are currently supported. |
🛠 Development
To build and run this extension locally:
git clone https://github.com/praktii/TranslationViewerExtension.git
cd TranslationViewerExtension
npm install
code .
Then press F5 in VS Code to launch the extension in a new Extension Development Host window.
🙌 Contributing
Got ideas or found a bug? PRs and issues are welcome!
- Fork the repo
- Create a new branch
- Make your changes
- Submit a pull request
📄 License
This project is licensed under the MIT License.
📸 Some screenshots
Built with ❤️ by @praktii
| |
