VSCode integration

Source URL: https://next-intl.dev/docs/workflows/vscode-integration

DocsWorkflows & integrationsVSCode integration

VSCode integration

Prefer to watch a video?

Editor tools

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

.vscode/settings.json

    "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:

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.