i18n Key Helper

Resolve numeric i18n keys directly inside VS Code with hover details, inline decorations, completion, and go-to-definition.

Features

• Hover over a numeric key to see its resolved translation in Markdown format.
• Show inline translation hints beside matching keys with TextEditorDecorationType.
• Refresh hints automatically when visible editors change or translation files are saved.
• Auto-detect likely translation JSON files with vscode.workspace.findFiles("**/*.json", "**/node_modules/**").
• Jump from a key usage to the translation entry in the primary JSON file.
• Complete numeric keys while typing inside HTML and TypeScript translation calls.

Example

{{ "245144" | translateLabel }}

Hover and inline hints resolve the key to:

Booking Reference

Usage

1. Install the extension.
2. Open a workspace that contains i18n JSON files.
3. Optionally configure i18nHelper.translationFiles if your files are not inside a typical i18n, locales, or translations folder.
4. Open an HTML or TypeScript file and hover a key such as "245144".
5. Run i18n Helper: Reload Translations from the Command Palette after moving or renaming translation files.

Settings

{
  "i18nHelper.translationFiles": [
    "src/assets/i18n/en-us.json",
    "src/assets/i18n/fr-fr.json"
  ],
  "i18nHelper.enableInlineHints": true,
  "i18nHelper.supportedPatterns": ["translateLabel", "translate", "instant"],
  "i18nHelper.inlineHintColor": "#6A9955"
}

Screenshots

• Marketplace icon: images/logo.png
• Recommended next step: add an in-editor screenshot or GIF under images/ before publishing for a stronger Marketplace listing.

Commands

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

Development

npm install
npm run compile
npm run package

To publish after validating the VSIX:

npx vsce publish