IDE Extension for i18n

Supercharge i18n within VS Code — Visualize, edit & lint translated strings at a glance via Inline Decorations & Hover Support, and extract new strings with a single click.

VSCode install badge

inlang VS Code extension header image

#Superchange your i18n dev workflow

#Used by developers from:


Supercharge i18n within VS Code with powerful tools designed to streamline the translation process. Visualize, edit, and lint translated strings effortlessly using Inline Decorations & Hover Support. Extract new strings with a simple click, making localization tasks more intuitive and efficient.

Inlang is a powerful open-source extension for Visual Studio Code

#Getting started

#1. Create a project.inlang/settings.json in the root of your project

You can use the following template when using json files as translation files, if not, please look for other supported resource file types:

{
	// official schema ensures that your project file is valid
	"$schema": "https://inlang.com/schema/project-settings",
	// the "source" language tag that is used in your project
	"sourceLanguageTag": "en",
	// all the language tags you want to support in your project
	"languageTags": ["en", "de"],
	"modules": [
		"https://cdn.jsdelivr.net/npm/@inlang/plugin-json@4/dist/index.js"
	], // or use another storage module: https://inlang.com/c/plugins (i18next, json, inlang message format)
	"settings": {}
}

#2. Decide on a syntax matcher

You should continue with installing a syntax matcher. There are multiple syntax matcher available like:

If you want to add lint rules to your experience, you can add them from: https://inlang.com/c/lint-rules

#Requirements:

  • VS Code version 1.84.0 or higher.
  • Node.js version v18 or higher.

#Features

… and much more as seen below

#Context Tooltips

See translations and edit them directly in your code. No more back-and-forth looking into the translation files themselves.

#Extract Messages (translations)

Extract Messages (translations) via the Inlang: Extract Message code action.

#Message Linting

Get notified about missing translations and other issues directly in your IDE.

#Inline Annotations

See translations directly in your code. No more back-and-forth looking into the translation files themselves.

#Update Translations

Translations from the resource files are automatically updated when you change the source text.

#Usage

Just highlight/select the text you want and hit cmd . or ctrl + (Quick Fix / Yellow Bulb) to open the translate dialog to provide a id for it.

Hover over the message to see the tooltip with the translation.

If something isn't working as expected, please join our Discord or create an issue. We are happy to help!

#Configuration

You can configure the extension to your needs by defining the ideExtension property in the config.

PropertyTypeDescription
messageReferenceMatchersArrayAn array of functions that define matchers for message references inside the code. Each function takes an argument of type { documentText: string } and returns a promise that resolves to an array of message references (as defined by the messageReferenceSchema).
extractMessageOptionsArrayAn array of objects that define options for extracting messages. Each object has a property callback that is a function which is called when the user finishes the message extraction command. The callback function takes two arguments of type string: messageId (the message identifier entered by the user) and selection (the text which was extracted), and returns a string that represents the code which should be inserted into the document.
documentSelectorsArrayAn array of VS Code DocumentSelectors that specify for which files/programming languages the extension should be activated. Each document selector is an object with optional properties language, scheme, pattern, and notebookType.

For this example, the extension parses strings with a t translation function & gives the according extract options {t("messageID")} & t("messageID"). You can fully customize this behavior.

#Support: Join our Discord!

If something isn't working as expected or you have a feature suggestion, please join our Discord or create an issue. We are happy to help!

Change control

Publisher

inlang

License

Apache-2.0