VSCode integration

Prefer to watch a video?

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. Loccy
3. Sherlock

i18n Ally

Highlights:

• Message extraction
• Inline annotations
• Inline message editing
• Machine translations

Setup:

1. Install i18n Ally
2. Configure the extension in your project via workspace settings

"i18n-ally.localesPaths": ["./path/to/your/messages"], // E.g. "./messages"
"i18n-ally.keystyle": "nested"

Learn more in the i18n Ally docs.

Loccy

Highlights:

• Message extraction
• Inline annotations
• Inline message editing
• AI-enhanced features for message creation, machine translations and more (paid)

Setup:

1. Install Loccy and it will auto-detect your i18n setup
2. For advanced configuration, run Loccy: Create Config File from the command palette

Learn more on the Loccy website.

Sherlock

Highlights:

• Message extraction
• Inline annotations
• Inline message editing

Setup:

1. Install the Sherlock VS Code extension
2. Configure the extension in your project via 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.