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
:
i18n Ally
Features:
- Message extraction
- Inline annotations
- Inline message editing
- Machine translations (opens in a new tab)
- An editor UI (opens in a new tab) that provides a file-based system for annotating messages & reviews
Setup:
- Install i18n Ally (opens in a new tab)
- 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"
Sherlock
Features:
- Message extraction
- Inline annotations
- Inline message editing
- Message linting (opens in a new tab)
- Integration with other parts of the inlang ecosystem like the Fink editor (opens in a new tab) or the inlang CLI (opens in a new tab)
Setup:
- Install the Sherlock VS Code extension (opens in a new tab)
- 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 (opens in a new tab)