i18n Key Validator

A VS Code extension that validates i18n translation keys in real time across HTML and TypeScript files, comparing them against your locale JSON files.

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

Screenshots

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

Missing key underlined in red with diagnostic message and Quick Fix available

Features

Real-time Validation

• Detects all i18n keys used in HTML templates and TypeScript files
• Underlines in red any key that does not exist in the source locale
• Automatically updates when locale JSON files are edited

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

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

Smart Hover

• 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 $(go-to-file) link that opens the JSON file at the exact key line
• ✅ Key found → shows the translated text per locale
• ❌ Key missing → shows a missing key warning with Quick Fix available

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

Quick Fix — Create key in all locales

• When a key is marked in red, the VS Code 💡 lightbulb appears
• The action 💡 Create key in all locales writes the missing key to all locale JSON files simultaneously
• The initial value is the last key segment in uppercase (as a placeholder to translate)

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": "error"
}

Commands

Access from the command palette: Ctrl+Shift+P → i18nKV: ...

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