This product is in active development and has been released under the Creative Commons license.

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 Application

The 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 ~

  • language
  • component
  • component_filename├č
  • component_name

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.

  1. The text will be replaced with a lookup method using a string ID.
  2. Surrounding text will be modified if needed to merge the lookup with it's surroundings.
  3. Attribute nodes will change to an interpolated v-bind attribute (from foo to :foo) if not already set to one.
  4. .18n.json and .18n.yaml files will be created and/or updated.
  5. The translation table in the Translate tab will refresh.

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 .vue file is active.

The keyboard shortcut for this command is shift-control-alt-t.

The user views translations in a table.

  1. List the strings used in templates and script blocks
  2. Mark each string as either translate or ignore
  3. Adjust the text and id for new string entries
  4. Add all string settings to a metadata file.
  5. Sync the metadata file with a *.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).

todo:

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 test

When 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.yaml

3 languages (English, Spanish, and French) will be detected.

  • List all strings IDs along with each translation for every language.
  • Goto component usages
  • Goto translation yaml file.
  • Edit in-place
  • Auto Translate using Google Translate
  • Add a prefix to ID automatically

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.

todo: implement

Show all usages of a string ID in source code.

  • Remove Symbol And Replace With Text
  • Language Reports
  • Online Portal For Editing
  • Add or remove component prefix in string ID

  • Full undo support.
  • Jump to any usage or translattion directly from the string editor.
  • Mark strings as exclude.
  • Configure tags and attributes to consider or exclude.
  • Set ID and modify text from the string editor.
  • Generate custom string IDs
  • Merge with existing .yaml files.
  • Change existing strings directly from table
  • Goto source symbol, source text, or translation from table item

  • Only store exclusions in metadata, and do not create metadata at all if no exclusions exist.
  • Reuse existing string if conflict in name.
  • Special characters are not escaped in translations.
  • Add moustache around inserted lookup methods.

  • Auto clean metadata
  • Add string insertion
  • HTML values attribute insertion
  • Stylesheet support.

Send bugs and feature requests to bugs@twelvetone.tv