Skip to content
next-intl 3.0 is out! (announcement)
Docs
Workflows & integrations
VSCode integration

VSCode integration

To improve the workflow for managing messages right from your code editor, you can use an extension for VSCode that includes support for next-intl.

These extensions are known to support next-intl:

  1. i18n Ally
  2. inlang IDE extension

i18n Ally

Features:

Setup:

  1. Install i18n Ally (opens in a new tab)
  2. Configure the extension in your project via workspace settings (opens in a new tab)
.vscode/settings.json
"i18n-ally.localesPaths": ["./path/to/your/messages"], // E.g. "./messages"
"i18n-ally.keystyle": "nested"

inlang IDE extension

Features:

Setup:

  1. Install the inlang IDE extension (opens in a new tab)
  2. Configure the extension in your project via project.inlang/settings.json:
project.inlang/settings.json
{
  "$schema": "https://inlang.com/schema/project-settings",
  "sourceLanguageTag": "en",
  "languageTags": ["en", "de"],
  "modules": [
    "https://cdn.jsdelivr.net/npm/@inlang/plugin-next-intl@latest/dist/index.js"
  ],
  "plugin.inlang.nextIntl": {
    "pathPattern": "./messages/{languageTag}.json"
  }
}

Learn more in the inlang docs: Setting up next-intl with the IDE extension (opens in a new tab)