My international multilingual development road

I believe that many front-end ers will encounter the following problems when they encounter multi-language requirements

1. After the development is completed, facing many language keys, it is necessary to extract the real content into the language package and switch between different files, which is very cumbersome.
2. Often misses the translation, maybe one language is translated and another language is forgotten
3. It is too troublesome to maintain. When encountering language files with new requirements, it is necessary to synchronously update multiple language files at the same time.
4. Debugging is too uncomfortable. After a long time, it is impossible to know exactly what the current key corresponds to, and you need to check the language package yourself.

This is only a part of it, and there are many more problems that I won't list here. After I couldn't stand it anymore, I went to find out if there was a better solution. I tried many plugins until I found it----- i18n-ally , its appearance successfully solved all my pain points above, and And do more, whether it is development efficiency or development experience, it is an exponential growth!

i18n-ally

This is a vscode plugin. The project has open i18n-ally , and it is also a third-party tool officially recommended by the vue i18n project. It provides

1. Inline prompt function, through the inline prompt function, you can easily debug, and you will never be overwhelmed when facing a bunch of keys.

   

2. The current page floating window can quickly modify the language file corresponding to the key value, no need to frequently switch the language package and then find the key to modify

   

3. Unified management of all translations, for, not used, such as the use of translation progress can do a good monitor, while providing automatic translation function, automatic translation and translation application to the appropriate language pack

   

4. It is flexible and convenient to extract the untranslated text content on the page, and automatically establish the corresponding translation key in the corresponding position according to the structure

   

5. For more functions, please see official document explore by yourself

How to configure

The following will build an efficient multilingual working environment through the configuration instructions at the nanny level.

Configure the workspace

First of all, let's talk about the workspace of vscode. I believe that most of the time, many people use a workspace and a general configuration file, so when there are many projects, the drawbacks are particularly obvious. If only some projects need to use The obtained configuration is placed in the global settings. The number of projects will lead to a messy configuration file. The project-based workspace development configuration is particularly important. Maintaining some specific needs of the workspace configuration is necessary for daily development. For example, in the multi-language to be discussed later, as long as there are similar requirements, you can add files to the workspace. When you sometimes forget some development routines, because they are all similar projects, you can easily find similar codes in the same workspace. Perform cv operations. In general, the workspace is a solution for vscode to apply different configurations to different projects. More details on the work area may look this article , my approach is to build a file called workspace folder, there were all placed with .code-workspace suffix workspace profiles, unified management.

{
  //工作区配置,如果要配置多个文件夹，直接添加path即可，路径path是当前配置文件相对于真实的项目路径的
  "folders": [
    {
      "path": "../frontStudy/vue-test-case"
    },
    // {
    //   "path": "../company/secondProject/explorer"
    // }
  ],
  "settings": {
    //vscode在当前工作区的配置
  }
  //其他的选项请查看vscode文档
}

Configure Multilingual

For multi-language configuration, the vue project uses a combination of vue-i18n and the i18n-ally plugin mentioned above.

1. Install i18n-ally, directly search and install in the vscode plugin store
2. Create a workspace configuration file xxx.code-workspace, you can set a special tool area configuration folder like me, or you can set it directly in the project, fill in the configuration, add the project folder to the workspace through folders, and then use vscode Open configuration file

{
  //工作区配置,如果要配置多个文件夹，直接添加path即可，路径path是当前配置文件相对于真实的项目路径的
  "folders": [
    {
      "path": "../frontStudy/vue-test-case"
    },
    // {
    //   "path": "../company/secondProject/explorer"
    // }
  ]
}

3. Install vue-i18n under the project and build a language pack folder

yarn add vue-i18n

Create language pack folder locales and language file

4. Add i18n-ally config in workspace config file

  "settings": {
    "i18n-ally.localesPaths": ["src/locales"], //配置工作区内的语言包文件夹的匹配路径，可以为多个匹配
    "i18n-ally.extract.keygenStyle": "camelCase", //对默认生成的key的命名
    "i18n-ally.keystyle": "nested", //对于key的处理,包裹nesta:{b:{c:value}}, 展平flat a.b.c: value
    "i18n-ally.review.enabled": false,
    "i18n-ally.annotationMaxLength": 30
  }

5. Write i18n.js and import it in main.js

import Vue from "vue";
import VueI18n from "vue-i18n";
import cn from "./zh-CN/index.json";
import en from "./en/index.json";

Vue.use(VueI18n);
const langList = ["en", "zh"];

const initKey = initLangKey();


// 初始化语言key
function initLangKey() {
    let langkey = localStorage.getItem("langkey");
    // 如果未初始化，通过浏览器判断应该设置成啥语言
    if (!langkey) {
        const lang = (navigator.language || navigator.browserLanguage)
            .toLowerCase()
            .substring(0, 2);
        switch (lang) {
            case "en":
                langkey = "en";
                break;
            case "zh":
                langkey = "zh";
                break;

            default:
                langkey = "en";
                break;
        }
    } else if (!langList.includes(langkey)) {
        // 如果不是en,zh,默认en
        langkey = "en";
    }
    localStorage.setItem("langkey", langkey);
    return langkey;
}

const i18n = new VueI18n({
    locale: initKey,
    messages: {
        en: Object.assign({}, en),
        zh: Object.assign({}, cn),
    },
});

export default i18n;

Introduced in main.js

import i18n from './locales/i18n.js'

new Vue({
    i18n,
    render: h => h(App)
}).$mount('#app')

6. Enjoy the productivity boost from i18n-ally

Precautions

1. For the exploration of different frameworks and more functions, you can view them through official examples , which are more detailed, including configuration and language pack file configuration.

2. The permissions of different formats are different. i18n-ally can only read the key of the js file, and cannot write to change the key. By default, except for JSON, YAML, JSON5, others are closed. If you need support, you need to Add configuration, the support is as follows

At last

The experience i18n-ally brings to me is that from slash-and-burn to the industrial age, it has greatly improved my multi-language development experience. Thanks to the developers for providing this epoch-making development tool for me. The case code of this article has been put into github .