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.1.4

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. Underlines any key that does not exist in the source locale. 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.

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. 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

Ctrl+Click on any i18n key opens the source locale JSON file 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
• Button ⇅ Ordenar A→Z to sort all locale files alphabetically (with confirmation)
• Table auto-refreshes when 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 provides a full form to create a new key across all locales:

• Key field — dot-notation (e.g. common.save). Auto-suggested when opening from a plain-text chip.
• Per-locale inputs — one input per detected locale, each labeled with a flag emoji.
• ⚡ Translate — auto-translates that locale from the source locale using the MyMemory API (no API key required).
• ⚡ Translate All — fills all non-source locales in parallel with one click.
• ✓ Create Key — writes the key to all locale JSON files simultaneously.

Opening from a plain-text suggestion chip pre-fills the key name and source value automatically.

📸 Screenshot: Add i18n Key form in sidebar with locale inputs and translate buttons — 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

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 navigates to the source locale JSON at the exact key line
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