Qi son

Internationalization of VUE project is very tedious:

  • Copy the name configuration for all the Chinese characters that appear to be internationalized
  • Find the location of Chinese characters in vue/js filestemplateIn the labellabelOr otherproperty, or{{}}In thescript, orscriptManually copy and paste the internationalized key layer by layer.
  • Even if the same man, because of the different grammar in VUE, need to copy and paste repeatedly
  • Encountering piles of Chinese characters was one of the world 鈥 檚 sole remaining buoys

Quick start

  1. Install (store search vue-swift-i18n, or CTRL + P, type ext install richiechoo.vue-swift-i18n)
  2. Use, as shown below:

function

  1. Detect Chinese characters that need to be internationalized in Vue/JS, automatically generate JSON files, see [Portal] for details.
  2. Detect VUE/JS according to json file, detect Chinese characters, automatically replace with json key generated in Step 1, see [Portal] for details
  3. Detect the replaced key in the vue/ JS file and display the corresponding Chinese prompt popup, see [Portal] for details.
  4. XXX. Json file to generate flat locales xxx_flat.json file for easy value copying, see [Portal] for details.
  5. Provide t, TT, TTT code hints in Vue/JS, see [Portal]

detailed

Convention: Kanji – a continuous non-empty string beginning with a Kanji

Json generation, update (Ctrl+Alt+U)

  1. Chinese character retrieval principle

    • Located in the<template></template>In the>with<Between theChinese characters, such as< span > < / span > 123 Chinese characters
    • Located in the<template></template>Of the tag attribute inChinese characters, such as<span style =" max-width: 100%; clear: both; min-height: 1em;
    • Located in the<template></template>In the{{with}}Between theChinese characters, such as<span>{{test ? }}</span>
    • Located in the<script></script>In the"with"Between Chinese characters,'with'Between theChinese characters

  2. Generate updated Json path configuration, see Path and Json

  3. Generate update principle

  • If json is empty or the file does not exist, use the Detected Chinese character as value and [modulePrefix].[parents(level read)].[Current Vue file name]+ unique Id as key and store it in JSON
  • If the JSON file is not empty, perform intelligent replacement. Note: To prevent json data from being empty or incorrect after running the JSON generation command after internationalization
  • I. If the same val is used, the new key replaces the original key,val II. Save the new key and val as well as the original key and val

Ctrl+Alt+I

  1. Substitution principle

    • {{$t(‘unique-key’)}}
    • $id =”$t(‘unique-key’)” $id =”$t(‘unique-key’)”
    • $t(‘unique-key’)
    • $this.$t(‘unique-key’);

  2. For the related re, see Portal

  3. Replace by Json, see path and Json

Internationalization prompt (Ctrl+Alt+O)

  1. Prompt principle

    • Regular: /? <=\$t\([“‘])[^'”]+/gm matches the replaced string
    • Use the newly generated unique key instead of the JSON key to prevent the key in json from being used more than once

  2. The prompt is based on Json, see Path and Json

Four, Json flat processing

  1. Flattening principle:
    • Use all parent objects and keys for all values of keys* *. * *The connection
    • Json flat processing does not provide shortcuts to execute commands by right-clicking folders or Json files
  2. Flat generates/updates xxx_flat based on selected JSON. Json is the same as the JSON file path

Path and JSON

Root directory: Identifies the current project package.json as the root directory. Current file: the file where commands such as JSON generation are executed

  1. The path
  • Default path:[Root directory]/ SRC /locales/zh-cn.jsonIs the default JSON path
  • Provides string configuration items:Default Locales Path, for example, “test”, the corresponding JSON path:[Root directory]/ 'test/zh-cn.json
  1. Attribute name and value of the JSON file
  • Default: [parent folder name of current file].[Current file name (no suffix)]
  • Provides digital level configuration items:Parent Dir Level, such as3Represents the attribute name header add fetch3Layer parent folder name
  • Provides string configuration items:Module Prefix Fo Update JSON, for example, “sdm-ui”, will add” sdm-ui” before the parent folder name
  • Other configuration items:
    • Not Alert Before Update I18n, default Alert, if true, json will be directly updated without popup Alert
    • Do Not Disturb: The default is false, and true disables any command reminders
    • I18n Value Hover, default true, enable the Hover function

Code tips

  1. Chinese character Retrieval Principle 1,ttReplace with{{$t(' clipboard ')}}
  2. Chinese character Retrieval Principle 2,tReplace with$t(' clipboard contents '), need to add manually:
  3. Chinese character Retrieval Principle 3,tReplace with$t(' clipboard contents ')
  4. Chinese character Retrieval Principle 4,tttReplace withThis.$t(' clipboard contents ')

Documentation and Help

content Documentation and Help
Plug-in hello – world [Portal]
Plug-in Release Process (official) [Portal]
Official instance of vscode plug-in [Portal]
How do I detect vue files [Portal]
vscode API [Portal]
Vscode development (Chinese) [Portal]
Webstorm configures the LIVE template of the IDE [Portal]

other

  1. Vscode regular[\u4e00-\u9fa5]To find the Chinese characters
  2. The VScode extender-region plugin extends selection to facilitate replication

RFC

  • Internationalized JSON file names are configurable
  • Hover display i18N value, jump to corresponding key position of JSON file
  • Whether to distinguish between Vue/JS files can be configured
  • View it The default focus position when opening JSON
  • Display of matching error list during command execution (Filtered Chinese characters)