Translation preview — VS Code extension for @les3dev/i18n
VS Code extension that shows translated values inline for @les3dev/i18n calls in Svelte and TypeScript files.
Features
- Inline previews — Translated values appear as decorations next to each
i18n.t(), i18n.translate(), locals.t(), and locals.translate() call
- Status bar indicator — A status bar item shows whether the extension is active or whether the translations folder is missing/incorrect, and lets you switch locale or fix the folder in one click
- Auto-detection — When no folder is configured, the extension looks for a
translations or locales folder in your workspace automatically
- Folder picker — Set or correct the translations folder with a fuzzy-searchable quick pick (or a folder dialog) via
i18n: Init
- Locale switcher — Switch the preview locale at any time via the command palette or the status bar
- Click to navigate — Click on any translation call to jump to that key in the locale file
- Hover to inspect — Hover over a decorated call to see the translation key
- Auto-refresh — Decorations update live as you edit your locale files or source code
- Cursor-aware — The decoration hides on the line you are currently editing so it never obscures what you type
Requirements
Your project must use @les3dev/i18n with locale files named by their two-letter code:
<locales-folder>/en.ts
<locales-folder>/fr.ts
The locales folder is resolved in this order:
- The
i18n-preview.localesPath setting, if configured (workspace or global) — set it with i18n: Init
- An auto-detected
translations or locales folder found in the workspace
- The default
packages/shared/src/i18n/locales
Commands
All commands are available from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Description |
i18n: Init (select translations folder) |
Choose the translations folder via a searchable quick pick or a folder dialog |
i18n: Change locale |
Pick which locale to display in inline previews |
i18n: Reload translations |
Force-reload locale files without restarting VS Code |
i18n: Open translation source |
Jump to the selected key in the locale file (also triggered by clicking a decorated call) |
Settings
| Setting |
Type |
Default |
Description |
i18n-preview.locale |
string |
"en" |
Locale used for inline previews (must match a locale file name, e.g. en) |
i18n-preview.localesPath |
string |
"packages/shared/src/i18n/locales" |
Path (relative to the workspace root) to the folder containing the locale files |
How it works
The extension scans open .svelte and .ts files for the following call patterns:
i18n.t('key'); // Svelte context helper
locals.t('key'); // SvelteKit server locals (short form)
locals.translate('key'); // SvelteKit server locals
i18n.translate('en', 'key'); // Direct translate call with explicit locale
i18n.translate(locale, 'key'); // Direct translate call with variable locale (uses selected locale)
Each match is decorated with the resolved translation value before the call. The call itself is visually collapsed so the decoration acts as a readable label. On the line where your cursor sits, the original source is shown instead.
Clicking a decorated call opens the corresponding locale file and scrolls to the exact line for that key.
