i18n Key Helper

Resolve i18n keys directly inside VS Code with hover text, inline hints, completion, and go-to-definition.

This extension is built for projects that keep translation JSON files in places like assets/i18n, src/assets/i18n, locales, or similar workspace folders.

What It Does

• Shows the translated value when you hover an i18n key.
• Adds inline translation hints next to matching keys in HTML and TypeScript files.
• Supports both numeric keys like 245144 and string keys like format.fieldSeparator.
• Supports nested translation JSON and flattens it automatically using dot notation.
• Detects translation files from the workspace automatically.
• Prompts the user to choose a default language when multiple translation files are found.
• Lets the user reload translations at any time from the Command Palette.
• Jumps to the translation entry inside the selected primary language file.

Supported Usage

HTML template

{{ "245144" | translateLabel }}
{{ "format.fieldSeparator" | translate }}

TypeScript

this.translate.instant("245144");
this.translate.get("format.fieldSeparator");

Supported Translation File Formats

Flat JSON

{
  "245144": "Booking Reference",
  "514091": "Total Amount"
}

Nested JSON

{
  "format": {
    "fieldSeparator": "Field Separator",
    "textQualifier": "Text Qualifier",
    "textQualifierOnlyIfNeeded": "Use qualifier only if needed",
    "decimalSeparator": "Decimal Separator",
    "separator": {
      "comma": ",",
      "semicolon": ";",
      "tab": "tab",
      "pipe": "|"
    }
  }
}

These nested values are resolved as:

{{ "format.fieldSeparator" | translate }}
{{ "format.separator.comma" | translate }}
{{ "format.separator.pipe" | translate }}

How It Works In A Real Project

If your project has files like:

assets/i18n/en-us.json
assets/i18n/fr-fr.json
assets/i18n/de-de.json

the extension will:

1. scan the workspace for translation JSON files
2. detect the files under assets/i18n
3. load the translations
4. if more than one language file is found and no default is configured, ask the user to choose the default language
5. use that selected language for hover, inline hints, definition lookup, and completions

Setup

Option 1: Let the extension auto-detect files

1. Open the project in VS Code.
2. Make sure your translation JSON files are inside the workspace.
3. Reload the window if needed.
4. If multiple language files are found, choose the default language from the popup.

This is the easiest option when your files are already under folders like:

• assets/i18n
• src/assets/i18n
• locales
• translations

Option 2: Configure translation files manually

If you want to control the exact files, add this to workspace settings:

{
  "i18nHelper.translationFiles": [
    "assets/i18n/en-us.json",
    "assets/i18n/fr-fr.json",
    "assets/i18n/de-de.json"
  ],
  "i18nHelper.defaultLanguage": "en-us"
}

Settings

i18nHelper.translationFiles

Array of translation JSON paths relative to the workspace root.

Example:

"i18nHelper.translationFiles": [
  "assets/i18n/en-us.json",
  "assets/i18n/fr-fr.json"
]

i18nHelper.defaultLanguage

Controls which language file is treated as the main source.

Accepted values:

• en
• en-us
• fr-fr
• en-us.json

If it is empty and multiple files are detected, the extension will ask the user to choose.

i18nHelper.enableInlineHints

Enable or disable inline translation hints.

i18nHelper.supportedPatterns

Pipe or method names that should be recognized as translation lookups.

Default:

["translateLabel", "translate", "instant"]

i18nHelper.inlineHintColor

Controls the color of inline hints.

Commands

• i18n Helper: Reload Translations
• i18n Helper: Toggle Inline Hints

Typical User Flow

1. Install the extension.
2. Open the project.
3. Let the extension detect assets/i18n/*.json.
4. Choose the default language when prompted.
5. Hover over keys like 245144 or format.fieldSeparator.
6. See translations inline and in hover.

Development

npm install
npm run compile
npm run package

Package Output

The extension icon is stored at:

images/logo.png

To publish after validating the VSIX:

npx vsce publish