#What does this plugin do?
This plugin reads and writes messages for i18next setups. It also determines how translation functions and namespaces are parsed and handled by Sherlock – a helpful i18n VS Code extension.
#Manual Installation
We recommend using the install button, but if you want to do it manually:
- Add this to the modules in your
project.inlang/settings.json
- Change the
sourceLanguageTag
if needed - Include existing languagetags in the
languageTags
array
{
"sourceLanguageTag": "en",
"languageTags": ["en", "de"],
"modules": [
"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@latest/dist/index.js"
],
"plugin.inlang.i18next": {
"pathPattern": "./resources/{languageTag}.json"
}
}
#Settings
The plugin offers further configuration options that can be passed as arguments. The following settings exist:
type PluginSettings = {
pathPattern: string | { [key: string]: string }
variableReferencePattern?: [string] | [string, string]
sourceLanguageFilePath?: string
}
#pathPattern
To use our plugin, you need to provide a path to the directory where your language-specific files are stored. Use the dynamic path syntax {languageTag}
to specify the language name.
#pathPattern without namespaces
"plugin.inlang.i18next": {
"pathPattern": "./resources/{languageTag}.json"
}
#pathPattern with namespaces
"plugin.inlang.i18next": {
"pathPattern": {
"common": "./resources/{languageTag}/common.json",
"vital": "./resources/{languageTag}/vital.json"
}
}
key
(prefix): is prefixing the key with a colon
values
(path): is the path to the namespace resources
#variableReferencePattern
This defines the pattern for variable references. The default is how i18next suggests using placeholders.
default:
"plugin.inlang.i18next": {
"variableReferencePattern": ["{{", "}}"]
}
#sourceLanguageFilePath
This setting is optional and should only be used if the file name of your sourceLanguageTag does not match your pathPattern structure. For example, if your sourceLanguageTag is en
but your sourceLanguage file is called main.json
, you can use this setting to specify the path to the sourceLanguage file. We recommend renaming the file to en.json
and not using this setting.
#Without namespaces
"plugin.inlang.i18next": {
"sourceLanguageFilePath": "./resources/main.json"
}
#With namespaces
"plugin.inlang.i18next": {
"sourceLanguageFilePath": {
"common": "./resources/main/common.json",
"vital": "./resources/main/vital.json"
}
}
#Install the Inlang Visual Studio Code extension (Sherlock) to supercharge your i18n workflow
The plugin automatically informs Sherlock how to extract keys and namespaces from your code in order to display inline annotations. A quick run through of the most important features can be found here (loom)
#In-code usage
t("key")
With namespaces:
t("namespace:key")
or t("key", { ns: "namespace" })
To learn about namespaces and how to use translation functions in your code, refer to the i18next documentation
#Expected behavior
The message IDs are sorted in the order in which they appear in the sourceLanguage file. The nesting or flattening of IDs is detected on a file-by-file basis. If the sourceLanguage file contains nested IDs, the plugin will also create nested IDs in the targetLanguage files. If the sourceLanguage file contains flattened IDs, the plugin will also create flattened IDs in the targetLanguage files.
#Contributing
#Getting started
Run the following commands in your terminal (node and npm must be installed):
npm install
npm run dev
npm run dev
will start the development environment which automatically compiles the src/index.ts files to JavaScript (dist/index.js), runs tests defined in *.test.ts
files and watches changes.
#Publishing
Run npm run build
to generate a build.
The dist directory distributes the plugin directly via a CDN like jsDelivr
Read the jsDelivr documentation
Is something unclear or do you have questions? Reach out to us in our Discord channel