VSCode Extension
Speed up manual i18n tasks with inline previews and one-click key insertion
Overview
The Stringer i18n Helper is an official VSCode extension that works alongside the CLI. It's designed to help with manual i18n tasks and review — not as a replacement for the CLI's batch conversion.
Important: The extension is a companion to the CLI, not a replacement. Use the CLI for bulk conversion and translation. Use the extension for one-off strings, reviewing translations, and keeping things in sync.
Install from Visual Studio Marketplace →
What It Does
| Feature | Description |
|---|---|
| Add i18n keys | Convert selected text to t('key') with one click |
| Inline previews | See translation values next to t('key.path') calls |
| Missing key alerts | Highlights keys that don't exist in your locale files |
| Auto-inject setup | Adds useI18n import when needed |
Requirements
Before using the extension:
- Run the Stringer CLI at least once so your project has i18n configuration
- Have your
outputDirandbaseLanguageset (happens during the convert flow)
UI Highlights
Right-click menu actions
Select a string, right-click, and choose “Add i18n key via Stringer” or related actions to stay inside VSCode while leveraging the CLI companion.
Accessing settings
Use the Settings button to instantly adjust preview behavior, show/hide inline helpers, or change how keys are emitted.
Extension main menu and commands
The main menu lists commands to open settings, switch previews, or invoke CLI helpers like align and repairs.
Preview controls
Change the preview language from the status bar and watch the highlighted colors update so you always know which locale is visible.
Key Features
Convert String to i18n Key
- Select a user-visible string in your code
- Right-click → "🌎 Add i18n key via Stringer"
- The extension will:
- Add the text to your base locale file under a unique key
- Replace the selection with the correct
t('key')call - Inject
const { t } = useI18n()if missing
Inline Translation Preview
- See the translated value next to each
t('key.path')call - Hover to see the key and current value
- Toggle preview language from the status bar
Inline Preview Modes
Switch between preview styles from the status bar or inline menu:
- Key + Locale — shows the translation value and the locale together for quick confirmation.
- Locale Only — drops the key and just shows the localized value next to the code.
- No preview (key only) — replaces inline text with the i18n key and hides the preview panel.
Missing Key Highlighting
- Missing keys show a red inline indicator
- Use
stringer alignto sync keys across all locale files
When to Use the Extension
Use the extension for:
- Strings the CLI missed (edge cases)
- New strings you add while developing
- Reviewing translations inline
- Quick one-off conversions
Use the CLI for:
- Initial bulk conversion of your codebase
- Translating to new languages
- Aligning translations across locales
Tips
- After adding strings manually, run
stringer alignto translate them to all your target languages - Use the status bar to quickly switch preview languages
- The extension respects your project's
baseLanguagesetting