I18n Inline Tool for VSCode

An extension for Visual Studio Code that adds inline annotations and auto completions when calling $t

I18n Inline Tool provides additional context of JetBrains' IDEs style for your internationalized code. By displaying inline internationalized translations, it makes it easier to read complex internationalized keywords; Through code completions, we no longer need to look up the international dictionary.

Configurations

Click the extension icon in the lower left corner of the status bar , it will open .i18ninlinerc file, the i18n prompt function can be enabled in the following three ways.

1. Specify local i18n files in your project

Configure i18nFiles like this:

{
  "i18nFiles": {
    "zh_cn": "src/lang/cn.js",
    // or multi files
    "en_us": ["src/lang/en.js", "../other-project/src/lang/en.js"]
  } 
}

language file schema:

export default {
  "lang.wms.fed.hello": "你好",
  // ...
}

2. Specify outside i18n file path

Configure jsonDataPath as a local path:

{
  "jsonDataPath": "/path/to/data.json",
  "i18nKeys": ["zh_cn"]
}

file schema:

{
  "lang.wms.fed.hello": {
    "zh_cn": "你好",
    // ...
  }
}

3. Configure MySQL database connection

Configure db connection information:

{
  "db": {
    "host": "0.0.0.0",
    "username": "readonly",
    "password": "readonly",
    "database": "database",
    "table": "i18n table name"
  },
  "i18nKeys": [],
  "key": "lang_code"
}

db.host supports reading environment variables by specifying the environment variable db.readHostFromEnv in .env or .env.development file.

For example, in vue projects, specify the environment variable as VUE_APP_BASE_URL

Configuration Field Details

Configuration example

1. For example, we have an international table structure as follows:

t_i18n_language

Your international configuration should be as follows:

{
  "db": {
    "host": "0.0.0.0",
    "username": "readonly",
    "password": "readonly",
    "database": "database",
    "table": "t_i18n_language"
  },
  "i18nKeys": ["zh_cn", "en_us"],
  "key": "lang_code"
}

2. For example, we have an international table structure as follows:

t_chaos_i18n_language

Your international configuration should be as follows:

{
  "db": {
    "host": "0.0.0.0",
    "username": "readonly",
    "password": "readonly",
    "database": "database",
    "table": "t_chaos_i18n_language"
  },
  "i18nKeys": ["zh_cn", "en_us"],
  "traverse": "(list, cb) => list.forEach(item => cb(item['language_code'], item['item_code'], item['item_value']))",
}

Example of a complete configuration:

{
  "i18nFiles": {
    "zh_cn": "src/i18n/lang/cn.js",
    "en_us": "src/i18n/lang/en.js"
  },
  // or
  "jsonDataPath": "/path/to/data.json",
  // or
  "db": {
    "host": "0.0.0.0",
    // or
    "readHostFromEnv":  "VUE_APP_BASE_URL",
    "username": "readonly",
    "password": "readonly",
    "database": "database",
    "table": "i18n table name"
  },
  "i18nKeys": [
    "zh_cn",
    "en_us",
    "zh_hk"
  ],
  "key": "lang_code",
  "validateKey": "lang\\.\\w+\\.fed"
}

Settings

The extension provides a handful of configuration settings you can use to customise the look and behaviour of the parameters.

There are also a handful of settings that can be used to customise the styling of the annotation to your own personal preference.

Themable Colours

You can change the default foreground and background colours in the workbench.colorCustomizations property in user settings.

Commands

Credits / Links

• VSCode's Extension Samples, which was a huge help to get started
• Liam Hammett for the Inline Parameters for VSCode (An extension for Visual Studio Code that adds inline parameter annotations when calling a function.)

License

The MIT License (MIT). Please see the license file for more information.