i18n Studio Pro

A full-featured i18n management suite for VS Code. Real-time validation, inline translations, key table, hover across locales, CodeLens, sort keys, and plain-text detection. Supports ngx-translate and similar setups.

Supports two file structures:

• Namespaced: src/assets/i18n/{locale}/{namespace}.json
• Flat: src/assets/i18n/{locale}.json (e.g. en.json, es.json — auto-detected)

Version: 2.3.2

Found a bug or false positive? Open an issue on GitHub — or use the 🐛 Report Issue section inside the extension sidebar.

Feature Overview

Features

Real-time Validation

Detects all i18n keys used in HTML templates and TypeScript files, and keeps them flagged until they are 100% translated across every locale:

• Missing key — the key does not exist in the source locale. Quick Fix: Crear key en todos los locales.
• Incomplete key — the key exists in the source but is missing or empty in one or more other locales. The diagnostic lists exactly which locales are missing (e.g. missing/empty in: en, fr) and stays visible until every locale has a non-empty value. Quick Fix: Completar traducciones opens the sidebar form prefilled with the existing translations and focus on the first missing locale.

The marker only disappears once the key is present and non-empty in all locales. Automatically updates when locale JSON files are edited.

📸 Screenshot: missing key underlined with diagnostic message — proximamente

Inline Decorations

Shows the translation text in gray italic next to each key, directly in the editor. Always visible without hovering. Updates when switching tabs or modifying JSON files.

📸 Screenshot: inline decoration showing translated value next to key — proximamente

Smart Hover — HTML & TypeScript

Hover over any i18n key to see its translations across all available locales. Fixed order: ES first, EN second, rest alphabetical. Each locale includes a link that opens the JSON file at the exact key line, and an ✎ Abrir en formulario button that opens the sidebar form loaded with that key and all its translations.

Hover showing translations for ES, EN and FR with direct links to each locale file

Hover in Locale JSON files

When editing a .json locale file, hover over any key to see its translations in all other languages. Each entry shows a direct link to open that locale at the exact key line, plus an ✎ Abrir en formulario button to edit all translations from the sidebar. Works for both flat and namespaced structures.

📸 Screenshot: hover on JSON key showing translations in EN, FR — proximamente

Quick Fix — Create key in all locales

When a key is marked as missing, the VS Code 💡 lightbulb appears. The action writes the missing key to all locale JSON files simultaneously. Prompts for the source locale value; other locales get a [LOCALE] value placeholder.

Missing key with Quick Fix available

Ctrl+Click — Go to Source (HTML / TS)

Ctrl+Click on any i18n key in an HTML template or TypeScript file opens the source locale JSON at the exact line where the key is defined.

📸 Screenshot: Ctrl+Click navigating to JSON file at key line — proximamente

Autocompletion (IntelliSense)

Suggests all available keys from the source locale when typing inside a | translate or translate.instant() context. Shows the translation as detail in the suggestion menu. Works in HTML templates and TypeScript files.

📸 Screenshot: IntelliSense dropdown showing key suggestions with translations — proximamente

i18n Key Table — full overview

Opens a table panel showing all keys as rows and each locale as a column. Features:

• Filter by key name or translation value in real time
• Toggle Solo faltantes to see only keys missing in at least one locale
• Click ↗ on any cell to jump directly to that key in the locale JSON file
• Missing cells show a ✚ crear button that opens the sidebar Add i18n Key form, prefilled with the key, any existing translations, and focus on the missing locale
• Button ⟳ Refrescar to reload keys from disk — use it when a JSON file was edited outside the extension and the table did not pick up the change
• Button ⇅ Ordenar A→Z to sort all locale files alphabetically (with confirmation)
• An in-panel toast confirms the result of sort and refresh actions
• Table auto-refreshes when keys are created or locale JSON files change

📸 Screenshot: table panel with key rows, locale columns, missing cells highlighted — proximamente

i18n Table for current file — toolbar button

A 🌐 globe icon appears in the editor toolbar when viewing an .html or .ts file. Clicking it opens the table filtered to the keys used in that file only. Below the table, a 💡 Textos sin traducir section detects plain text in the HTML (tag content, placeholder, title, aria-label attributes) that has no | translate — each shows a + crear key button.

📸 Screenshot: globe button in editor toolbar, table filtered to file keys — proximamente

📸 Screenshot: "Textos sin traducir" section with plain text chips and "+ crear key" buttons — proximamente

Add i18n Key — sidebar form

The ✚ Add i18n Key section in the sidebar is a full form to create or edit a key across all locales:

• Key field — dot-notation (e.g. common.save). Locked (read-only) by default with a 🔒 / ✏️ toggle; click it to rename the key when you really need to. This prevents accidental edits when you opened the form just to complete translations.
• Per-locale inputs — one input per detected locale, each labeled with a flag emoji. Existing translations are pre-filled when editing.
• ⚡ Translate — auto-translates that locale from the source locale using the MyMemory API (no API key required).
• ⚡ Translate All — translates every non-source locale from the source locale (es by default) and shows a before → after diff panel. Nothing is applied until you press ✓ Confirmar todo; ✕ Cancelar discards the proposal so your current values stay untouched.
• ✓ Create Key — writes the key to all locale JSON files simultaneously (upsert — also used to save edits).

The form opens pre-filled from three places: a plain-text suggestion chip (key + source value), the ✚ crear button on a missing table cell (key + existing translations, focus on the missing locale), and the ✎ Abrir en formulario button in any key hover.

📸 Screenshot: Add i18n Key form with locked key field and Translate All diff panel — proximamente

CodeLens in locale JSON files

On the first line of any locale JSON file, two CodeLens actions appear:

• $(table) Ver tabla i18n — opens the full key table
• $(sort-precedence) Ordenar keys A→Z — sorts keys alphabetically with a confirmation dialog

The sort confirmation asks whether to sort only this file or all locale files. If all files are selected, a second modal lists every file that will be rewritten before proceeding.

📸 Screenshot: CodeLens actions on first line of locale JSON file — proximamente

📸 Screenshot: sort confirmation modal asking "Solo este archivo" vs "Todos los locales" — proximamente

Locale navigation from JSON — jump between languages

While editing a locale JSON file you can walk the same key across every language without leaving the editor:

• Ctrl+Click on a key jumps to that same key in the next locale that has it, cycling through all locales and wrapping from the last back to the first. Locales where the key is missing are skipped, and the cursor lands just inside the value string ready to edit.
• Navigation uses VS Code's native Go to Definition, so it fires only on the actual click — holding Ctrl and moving the pointer just shows a peek preview and never navigates or changes files.

Locale order follows the same convention as everywhere else: ES first, EN second, the rest alphabetical. There are no per-line CodeLenses, so the text never shifts as the cursor moves.

📸 Screenshot: Ctrl+Click cycling the same key across locale files — proximamente

Detected Patterns

File Structure

The extension automatically detects the pattern used — no additional configuration required.

Namespaced (one file per feature)

src/assets/i18n/
├── es/
│   ├── company.json
│   └── reservation.json
├── en/
│   ├── company.json
│   └── reservation.json
└── fr/
    ├── company.json
    └── reservation.json

Each file has a single root namespace:

{
  "company": {
    "tabs": {
      "menu": "Menu",
      "services": "Services"
    }
  }
}

Flat (one file per locale)

src/assets/i18n/
├── es.json
├── en.json
└── fr.json

Configuration

Add this to your project's .vscode/settings.json:

{
  "i18nKV.localesPath": "src/assets/i18n",
  "i18nKV.sourceLocale": "es",
  "i18nKV.severity": "info"
}

Commands

Access from the command palette: Ctrl+Shift+P → i18n Studio Pro: ...

The 🌐 button in the editor toolbar (visible on .html and .ts files) is a shortcut to Show i18n Table for this file.

How it works

1. On activation, auto-detects file structure (namespaced vs flat)
2. Reads all locales and flattens nested keys into dot-notation (company.tabs.menu)
3. Scans each open .html and .ts file for | translate and translate.instant/get/stream() patterns
4. Marks as error/warning/info any key not found in the source locale
5. Shows inline decorations with the translation in gray italic next to each key
6. Ctrl+Click in HTML/TS navigates to the source locale JSON at the exact key line; in a locale JSON, it cycles to the next locale that has the key (skipping missing ones), on the click only
7. Watches locale JSON files for changes and re-validates automatically

Manual Installation

1. Download the .vsix file
2. In VS Code: Ctrl+Shift+P → Extensions: Install from VSIX...
3. Select the .vsix file
4. Reload VS Code

License

MIT