A tool for managing i18n translations in IntelliJ
This tool will take a Vue Single File Component, such as this:
<template>
<app title='My Application'>
<div slot=content>Welcome to my Vue application</div>
</app>
</template>
And replace the strings with IDs and a lookup function (using the vue-i18n format).
<template>
<app :title="$t('appName')">
<div slot=content>{{$t('welcome')}}</div>
</app>
</template>A .yaml file will be created with source strings.
welcome: Welcome to my Vue application
appName: My ApplicationThe plugin can handle string literals in interpolated elements and attributes, spliting and formatting along the way.
<div> Hello {{ 'very very strange' + getWorld() }} </div>Once a string is defined, you can then create other language files and translate your strings manually or automatically.
A full suite of refactoring tools is provided.
All i18n commands are placed in the main menu bar under the i18n item.
Our roadmap has paved the way for other implementations besides Vue source code and YAML data stores.
The application currenty only supports Vue source code using YAML files as a store.
| Platform | Implemented |
|---|---|
| Vue | Yes |
| React | No |
| Angular | No |
| HTML | No |
| C | No |
| C# | No |
| Perl | No |
| Visual Basic | No |
| Objective C | No |
| Platform | Implemented |
|---|---|
| YAML | Yes |
| Property File | No |
| MySql | No |
A file called i18n.config.js is used for settings related to translation.
This file is an es6 module that exports a default object containing your preferences.
The file is located by finding the first directory containing a configuration file, starting from the component's directory, and then moving upwards. If no file is found, default settings are used. You can use multiple configurations in a project by including multiple configuration files in various subdirectories.
You can automatically create a default configuration file in your module's root directory using the command i18n/Create i18n Configuration File.
This file will contain the default settings that would be used if the file did not exist.
Invalid configurations files will be ignored, and a warning notification will be displayed.
// i18n Configuration
export default {
// String Detection Filtering
tagInclude:[], // 'div', 'span', 'p', 'button'
tagExclude:[],
attInclude:[], // 'title', 'caption', 'label', 'value', 'placeholder'
attExclude:[],
// Languages
defaultLanguage: 'en',
languages:['en','sp','fr'],
// Translation Data location
translationFile: 'i18n/{{language}}.yaml',
// String ID Generation
maxIdLength: 64,
prefix: '',
suffix: '',
}Tags to include for analysis in the translation table.
Tags to exclude from analysis from the translation table.
Attributes to include as suggestions in the translation table.
Attributes are allowed in any element, regardless of the tagInclude and tagExclude settings.
Including foo will also include the attributes decorated with : and ., such as :foo, v-bind:foo, and 'v-bar:foo.abc'
Attributes to exclude as suggestions from the translation table.
Attributes are ignored in any element, regardless of the tagInclude and tagExclude settings.
default: 'en'
The default language to use. This is applied when generating the name of the .i18n.<language>.yaml file to create and sync with.
default: undefined
A list of languages to consider. The default language is always included, even if not in this list. If the list is not defined, the default language file's directory is scanned.
Default yaml files will be created for each language in this array.
default: i18n/{{language}}.yaml
The path (relative to the configuration file or Vue component) used to store and retrieve translations. By default, this is in the component's directory with the filename being the name of the component + .i18n + the default language + .yaml.
This will load and save translations in an i18n subdirectory next to your configuration file.
Your component's filename will replace the {{component}} part of the path. ({{component}}.i18n.{{language}}.yaml)
Your default language ID will replace the {{language}} part of your path.
If you specify a component parameter, the path is relative to the component. Otherwise, the path is relative to the configuration file.
The result would be a file next to your component with a name like my-component.vue.i18n.en.yaml.
To store all strings in a common file, do not use the {{component}} parameter. For example, assuming your configuration is at the root of your project and your translations are in the src/i18n directory, use the path src/i18n/{{language}}.yaml
default: 64
The maximum length of a generated ID.
For example, if ids.maxLength: 7, This is a long string will become thisIsA.
If an extension is added to the ID to make it unique,
it is added to the restricted length, making the string the maxLength plus the extension's length.
: A prefix added to the start of each newly generated string ID. Variables can be used. Dots can be used for nesting.
{
prefix: 'generated.',
suffix: "_steven"
}This configuration would result in the string Hello World being named MyPrefix.helloWorld_MySuffix. In YAML:
generated
helloWorld_steven: A suffix added to the end of each newly generated string ID. Variables can be used. Dots can be used for nesting.
Variables can be enclosed in configuration strings using the `{{variable_name}}`` format. ~ todo document the following variables ~
There are 2 methods used to replace literal strings, Selection and Table.
With the Selection Method, the user selects text in a file and then executes the translate selected command from the Translate tab, the Analyze menu. or using a keyboard shortcut.
An ID will be suggested in a prompt dialog. If the user continues the following items will be performed.
.18n.json and .18n.yaml files will be created and/or updated.This method can be used to selected strings that are excluded from the table analysis, or are not detected correctly.
This command is only enabled when a
.vuefile is active.The keyboard shortcut for this command is
shift-control-alt-t.
The user views translations in a table.
*.yaml file.All string literals inside t$() methods are assumed to be string IDs. They may or may not have been tranlated or mapped.
Each table section has various actions that can be preformed on items.
Save new id-value pairs, or create a value for an upmapped id. Your new items will be added to the metadata and the items will be merged into the translation file.
A fields at the top of the table allows you to set a common dot-prefix for all saved strings.
For example: You set the prefix to foo.bar and create a string ID manchu.
The string ID will be saved as foo.bar.manchu.
Mark a string as excluded.
Unmark an excluded string.
You can enter string IDs into your Vue template, and then define the string value later.
The table report has a section listing String IDs that are referenced in the component but have no translation. This section allows you to specify the text in your default language. When you save the value, it will be added to your metadata and translation file.
You can replace the string value of an ID directly in the the table by updating the text field and pressing the Update Value button.
Remove the string ID and value from the metadata and the YAML file.
Once you map a value, it stays in the metadata until you remove it.
You can manualy remove the metadat entry by pressing the Remove button.
This will not remove the string from the translation table.
Change the value for a string ID
Open and select the template reference for the string entry.
Open and select the YAML translation for the string entry.
A string source refers to where a string literal is located.
For template blocks, this includes attributes, interpolated attributes, elements, and interpolated elements,
For script blocks, this includes literals in both component options (such as data and computed)
and global Javascript declared outside the component.
For attributes, that means :foo= and v-bind:foo must be inside quotes, foo= is considered to be translatable.
For element content, the strings must appear outside handlebars ({{ }}), or inside handlebars with quotes (', ", or backquote).
String IDs that contain dots will be nested in the .yaml file. So foo.man.chu will become
foo:
man:
chu:The i18n plugin can offer suggestions for inserting string IDs, and insert the lookup function into your source code.
Start by opening a file and placing the cursor where you want to insert the string lookup function. If you select a range, the range will be replaced.
Open the Insert String dialog using the i18n/Insert String command, or an assigned keyboard shortcut.
Select a string in the list and press Enter or the OK button.
You can type characters and use up-down arrows to filter the list.
If you are entering a string inside a Vue style section, the lookup function will be prepended with this..
Vue template sections will leave the this. prefix out.
You can navigate to a YAML translation file by placing the caret on a string ID in your source code, and then selecting the i18n/Goto Translation menu item.
The YAML file will open and the caret will move to the translation.
You can navigate to string ID usages by placing the caret on a string ID in your source code or a YAML file, and then selecting the i18n/Goto Usages menu item.
The source files will open and the caret will move to the usage.
Metadata for a component is stored in a JSON file using the name of the component + .i18n.json.
So foo.vue will have a companion file called foo.vue.i18n.json.
This file helps define what is translated, and what is ignored.
The metadata is converted into a translation file called foo.vue.i18n.en.yaml.
The filename prefix is the filename of the component. The language part of the file name is taken from the configuration settings.
The format is a standard yaml file with keys being the string ID and values being the translated value for the specifed language.
hello: Hello
world: World
thisIsATest: This is a testWhen you save your string table, new entries are added, existing entries are updated, and YAML values not mapped are left unchanged.
Refactoring uses a filterable table to present items and actions. In most case, you can edit-in-place without needing to explicitly save.
Translate a string into the selected language.
Translate all untranslated strings for a given ID.
Translate all untranslated strings for strings in all languages.
Resets all translations for every language, except for the default language. This can be done per stringID, single source file, or all source files.
Open and navigate to all usages of a string ID.
Open the translation file for a string ID for the specified language.
Languages are detected by finding yaml files in your translation directory. If your configuration is i18n/{{language}}.yaml,
then all yaml files in the i18n directory will be scanned to determine your active languages.
i18n.config.js
i18n/
en.yaml
es.yaml
fr.yaml3 languages (English, Spanish, and French) will be detected.
Same as Show All Strings, but only shows item that have not been translated. The default language is alsow shown
You can rename a string ID in all yaml files and referencing files.
You can merge a string ID with another string ID by Renaming it to an existing ID. The renamed version will overwrite the existing value.
Show all usages of a string ID in source code.
.yaml files.Send bugs and feature requests to bugs@twelvetone.tv