Setting Up next-intl with the Sherlock VS Code extension.

I'll walk you through the integration of the next-intl internationalization library with the Sherlock VS Code extension.

Nils Jacobsen

image

#What is this about?

In this guide, I'll walk you through the seamless integration of the next-intl internationalization library with Sherlock. This powerful combination, featuring next-intl and an Sherlock, enhances your development workflow, offering i18n management for Next.js projects.

#Why Choose Sherlock and next-intl together?

The synergy of the next-intl i18n library and an IDE extension provides a robust solution for internationalization in Next.js. Here's why it's a winning combination:

  • Extract translations: via the Sherlock: Extract Message code action.
  • Translation Linting: Get notified about missing translations and other issues directly in your IDE.
  • Inline Annotations: See translations directly in your code.
  • Update Translations: Translations from the resource files are automatically updated when you change the source text.

#Let's Get Started:

#1. Add the settings.json file:


  • Ensure you have a working next-intl project. You could also find examples here
  • Add a project.inlang folder on the root
  • Copy the following settings.json file to that new dir 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",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js"
	],
	"plugin.inlang.nextIntl": {
		"pathPattern": "./messages/{languageTag}.json"
	}
}

Adjust languageTags, and the path to your translations if needed. The plugin-next-intl is a plugin to make next-intl ecosystem compatible with inlang. For further configuration read the documentation.

#2. Install Sherlock:


  • Install Sherlock from the vscode marketplace
  • Reload the VS Code window to activate the extension.

#Usage:



Edit on GitHub

Keywords

Recommended