vue-swift-i18n RichieChoo/vue-swift-i18n

Preface 💌

Nowadays, the internationalization project has become an indispensable business project of various companies, and there are many solutions for the internationalization project. Vue-i18n is still widely used in the market at present. When I first came into contact with the internationalization demand in 18 years, VUE-I18N, the webStorm used by the editor, was also used. So I didn’t think about it that much. Since it is the late entry of the project, the two most critical issues

  • Constant copy and paste, naming, replacing (and occasionally miswriting $signs, etc 😪)
  • Late development, code readability is poor

So when there are other projects to internationalization, resolutely give up VUE-I18N and find a new way out, today’s protagonist Vue-Swift-I18N

Why use this plugin?

1, traditional I18N, need to copy all the international Chinese characters name configuration (do you have a name shortage) 2, need to distinguish the Chinese characters in template, script, And then manually changed to t (‘ ‘) or the enclosing t (‘) or enclosing t (‘ ‘) or enclosing t (‘ ‘) 3, intelligent replacement: I. If the same val is used, the new key, val ii, replaces the old key. Save the new key, val, and the original key if the name of the key is different from val. But over time, they forget. Reduced code readability (this plug-in includes showLabel function, but need to click each time, not smart, still does not improve the code readability, source code!! Go down to 👇)

Method of use

Install: (store search vue-swift-i18n, or CTRL + P, type ext install richiechoo. vue-swift-i18n use:

Plug-in function

  1. Detect Chinese characters that need internationalization in VUE/JS and automatically generate JSON files
  2. Detect vUE/JS based on the JSON file, detect Chinese characters, and automatically replace them with the JSON key generated in Step 1
  3. Detect the replaced key in the vue/ JS file and display the corresponding Chinese prompt pop-up window
  4. XXX. Json file to generate flat locales xxx_flat.json file for easy value copying
  5. Provide t, TT, TTT code hints in Vue /js

How it works

  • Quick JSON update

    🖤 Chinese character retrieval principle

    • Chinese characters located in, such as Chinese character 123
    • The Chinese character for the tag attribute in, such as
    • The Chinese character between {{and}} in, such as {{test? “Chinese characters” : “Chinese characters”}
    • The character between the “and” in, the character between “and”
    • Filter single-line comments

🖤 i18n JSON update path - Default: ** '[root]/ SRC /locales/zh-cn. JSON' ** Is the default JSON path - When setting defaultLocalesPath, langFile, path: ** '[root]/[defaultLocalesPath]/[langFile]' ** ' 'JSX // richierc.json project configuration file, {// Specify vue-swift-i18n to update internationalized JSON and quickly display internationalized JSON file directory address "defaultLocalesPath": "SRC /locales", // Specify the internationalized JSON file name "langFile": "zh. JSON ", "notAlertBeforeUpdateI18n": true, "parentDirLevel": 2, // Generate a unique key type for the internationalized JSON value. The default is short, and the length is 12. "puidType": "short"} ' 'is not requiredCopy the code

  • Intelligent replacement (advanced usage It’s coming It’s coming)

    Syntax: kazupon.github. IO /vue-i18n/

    Tips HERE I use as a plug-in project, directly modify in the plug-in project, business project only need to introduce the plug-in, plug-in project in the start of the business project, no need to configure any content about the plug-in; You can also introduce changes ！！！！！ directly into a business project

    🖤 classifies internationalized Chinese characters for ‘.vue’ and ‘.js’ using regex (modify configuration here)

    {{$t() {$t();'task.list.TaskList.55t0l81y8so0'$t($t) {$t($t) {$t($t);'task.list.TaskList.55t0l81y8so0', { i18n: 'i18n- Create multiple rounds of dialogue '})} Search keyword before modification: Text ->z.json unikey z.json unikey-> corresponding page Search keyword after modification: text -> corresponding page// Use different syntax to replace the key corresponding to the Chinese character in different positions
if (reg === propertyRegexp) {
    const prefix = temp.split('=') [0].replace(resoloveReg, ':');
    const mainStr = temp.split('=') [1].replace(resoloveMainReg, ' ');
    const result = localeObj[mainStr];
    if (result) {
      **$t("xx") template
      return `${prefix}="$t('${result}',{ i18n: 'i18n-${mainStr}'}) "`;**
    }
  } else {
    const resultStr = str.replace(resoloveReg, ' ');
    const result = localeObj[resultStr];
    if (result) {
      **{{$t("xx")}} template
      if (reg === angleBracketSpaceRegexp) {
        return "{{$t('" + result + "',{ i18n: 'i18n-" + resultStr + "'}}}"; } * *if (reg === scriptRegexp) {
        //this.$t("xx") script
        if (isScript) {
          if (isTypeScript) {
            return (
              **"(window as any).i18n.t('" +
              result +
              "',{ i18n: 'i18n-" +
              resultStr +
              "'})"**
            );
          } else {
            return (
              **"this.$t('" + result + "',{ i18n: 'i18n-" + resultStr + "'})"**
            );
          }
        }
        **$t("xx") template {{" Chinese "}
        if (isTemplate) {
          return "$t('" + result + "',{ i18n: 'i18n-" + resultStr + "'})"; * *}}}}Copy the code

  • Comprehensive display

    🖤 Based on the i18N keys replaced in the re matching file, the corresponding meanings are displayed in the rear

    conclusion

    1. All files can be generated directly by shortcut keys or right right-click

    2, the file will be automatically replaced with the relevant key content (except manual stitching), do not worry about the spelling error 🤗

    3. Late iteration, only right click to update JSON and file

    4. Code can be searched directly by keyword

Author: Zhou Yingxue, Large front End R&D Center

Recruitment information

Free big front end R&D center recruiting new students!

FE/IOS/Android engineers look over

Company benefits include:

  • Five insurances and one housing fund in full, plus commercial insurance
  • Free gym + annual physical examination
  • 10 percent discount for rent near the company
  • 2 promotions per year

Office location: Beijing Jiuxianqiao Putian Industrial Science and Technology Park welcome you to join us! Please send your resume to [email protected]!