Manage JSON Translations Easily in VS Code with JSON Translations Manager

Mohammed Hassan — Mon, 03 Mar 2025 08:51:26 +0000

Introduction

If you work with multi-language applications, managing JSON translation files can be a hassle. You often need to manually add, update, and verify translations across multiple JSON files. To make this process easier, I created the JSON Translations Manager — a simple yet powerful VS Code extension to help you manage translation keys effortlessly.

Download JSON Translations Manager

Features

1. View All Translations at Once

This extension shows all translation keys and values in a structured tree format, making reviewing missing or incorrect translations easy.

2. Edit Translations Quickly

You can directly edit translations within VS Code without switching between multiple files manually.

3. Add Translations Quickly

You can directly add the translation keys within VS Code, just write JTM in the text editor and all keys will show up as below image

4. View translation

You can quickly view translation values within VS Code. Simply select a translation key and hover over it to see the corresponding values in all available languages.

How to Use

Step 1: Install the Extension

Open VS Code.
Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X on Mac).
Search for JSON Translations Manager.
Click Install.

Step 2: Set Up Your Localization Folder

Before you start using JSON Translation Manager, you need to configure your localization (i18n) folder. Ensure it contains at least one JSON language file, such as en.json or ar.json. The recommended structure is:

/locales/en.json

/locales/fr.json

/locales/de.json

Step 3: Initialize and Use JSON Translations Manager

After setting up your localization folder, you need to initialize the extension to manage translations efficiently.

Available Commands

You can access the following commands in VS Code’s Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac):

JTM: Initialize or Update JTM Configuration — Set up or refresh the configuration for your translation files.
JTM: Add Translation — Add a new translation key using dot (.) notation for nested objects.
JTM: Add Translation from Selected Text — Convert selected text into a translation key automatically.

Once initialized, the extension scans your JSON files and presents them in a structured tree format.

JTM: Initialize or update JTM configuration

This command will create or update the jtmConfig.json file on your project.

JTM: Add translation

This command will create a translation using the key entered and save it on your translation files on the project.

You can use dot (.) notation to make the key a Nested

JTM: Add translation from selected text

This command will create a translation from the selected text and save it on your translation files on the project.

You can use dot (.) notation to make the key a Nested

Why Use JSON Translations Manager?

✅ Saves Time No need to manually check multiple files.

✅ Improves Workflow Works directly inside VS Code.

✅ Open Source Free to use and improve.

Conclusion

Managing translations in JSON files doesn’t have to be difficult. With JSON Translations Manager, you can quickly review, edit, and organize your translations with ease.

Try it now and improve your localization workflow!

👉 Install JSON Translations Manager

Have feedback or feature suggestions? Share your thoughts or contribute on GitHub.

DEV Community: Mohammed Hassan