js-i18n

JavaScript/TypeScript i18n library support for VS Code. powered by nabekou29/js-i18n-language-server.

Supported Libraries

• i18next / react-i18next
• next-intl

Features

• Inline translation display -- See translation values directly in your code
• Translation diagnostics -- Detect missing and unused translation keys
• Completion -- Auto-complete translation keys as you type
• Hover -- View all translation values by hovering over a key
• Go to definition -- Jump to the key definition in JSON translation files
• Find references -- Find all usages of a translation key in source code
• Rename -- Rename a translation key across all source and JSON files
• Language switcher -- Switch display language from status bar or command palette
• Edit translations -- Edit translation values from code actions or command palette
• Copy key -- Copy the translation key at cursor to clipboard
• Delete unused keys -- Remove translation keys not referenced in code
• Key prefix / Namespace / Monorepo -- Full support for complex project structures

Demo

Inline Translation Display

Translation values are displayed directly in your code, replacing the key text.

Decoration Modes

Choose how translations are displayed via js-i18n: Select Decoration Mode command.

Mode	Behavior	Cursor line	Screenshot
Replace + Inline (default)	Key is replaced with translation	Shows translation to the right
Replace + Hide	Key is replaced with translation	Hidden
Inline	Key stays visible	Translation shown to the right

Code Intelligence

Translation keys are fully integrated with the editor's intelligence features:

• Completion -- Start typing inside t("") to see matching keys
• Hover -- View translations for all languages at a glance
• Go to definition -- Jump directly to the key in JSON translation files
• Find references -- Locate every usage of a key across your codebase
• Rename -- Rename a key across all source and translation files at once

Translation Diagnostics

Project Structure Support

Namespace

Multiple useTranslation() calls with different namespaces are fully supported. The same key name resolves to different values depending on the namespace.

Key Prefix

useTranslation("ns", { keyPrefix: "stats" }) automatically prepends the prefix to all t() calls, reducing repetition in deeply nested translation structures.

Monorepo

Automatic per-package server isolation based on package.json boundaries. The same key resolves to different translations in each package.

Supported Syntax

// Function hooks
const { t } = useTranslation()
const { t } = useTranslation("namespace")
const { t } = useTranslation("namespace", { keyPrefix: "section" })
const t = useTranslations()          // next-intl
const t = useTranslations("namespace")

// Translation calls
t("key")
t("nested.key.path")
t("key", { count: 1 })

// JSX components
<Trans i18nKey="key" />
<Translation>{(t) => <span>{t("key")}</span>}</Translation>

Requirements

The language server binary is bundled with the extension -- no manual installation needed.

To use a custom build, set js-i18n.serverPath or install via:

cargo install js-i18n-language-server

Configuration

License

MIT