Skip to content

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

i18n Ally

Features:

  • Message extraction
  • Inline annotations
  • Inline message editing
  • Machine translations
  • An editor UI that provides a file-based system for annotating messages & reviews

Setup:

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

Sherlock

Features:

  • Message extraction
  • Inline annotations
  • Inline message editing
  • Message linting
  • Integration with other parts of the inlang ecosystem like the inlang CLI

Setup:

  1. Install the Sherlock VS Code extension
  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 Sherlock extension

Docs

 · 

Examples

 · 

Blog