Master Vue Internationalization with vue‑swift‑i18n: Full Feature Guide

Homepage

Introduction

Vue project internationalization is very cumbersome:

Copy all Chinese strings that need internationalization and name them in the configuration.

Find each Chinese string in vue/js files, whether in template label, other property, {{}} in script, or in script, and manually copy the generated i18n key.

Even identical Chinese characters need to be copied repeatedly due to different syntax contexts.

Concatenated Chinese strings are especially painful.

Quick Start

Install the extension (search "vue-swift-i18n" in the marketplace, or press Ctrl+P and run ext install RichieChoo.vue-swift-i18n).

Use it as shown below.

Features

Detect Chinese characters in vue/js files and automatically generate a JSON file.

Based on the generated JSON, replace Chinese characters in vue/js with the corresponding keys.

Show a tooltip with the original Chinese text for already replaced keys.

Generate a flattened xxx_flat.json for easy value copying.

Provide code completions for t, tt, ttt in vue/js.

Details

Convention: a Chinese string is defined as a continuous non‑space substring that starts with a Chinese character.

1. JSON Generation & Update (Ctrl+Alt+U)

Chinese character detection rules:

Inside <template> tags, characters between > and < (e.g., <span>汉字123</span>).

In attribute values of tags inside <template> (e.g., <span title="汉字"></span>).

Between {{ and }} inside <template> (e.g., <span>{{test ? "汉字" : "中文"}}</span>).

Inside <script> between double or single quotes.

Configure the path for the generated JSON (see Path and JSON section).

Generation rules:

If the JSON file is empty or missing, store each detected Chinese string as a value and use [modulePrefix].[parents].[fileName]+uniqueId as the key.

If the JSON already exists, perform smart replacement to avoid overwriting existing data.

Smart replacement:

If the value is identical, replace the old key/value with the new one.

If the value differs, keep both the new and existing key/value pairs.

2. Internationalization Replacement (Ctrl+Alt+I)

Replacement rules:

Chinese text like 汉字123 becomes {{$t('unique-key')}}.

Attribute values like title="汉字" become :title="$t('unique-key')".

Plain Chinese text becomes $t('unique-key').

In script context, use this.$t('unique-key').

Relevant regular expressions are provided (see link).

Replacement is based on the generated JSON.

3. Internationalization Tooltip (Ctrl+Alt+O)

Tooltip rules:

Regex /(?<=\$t\(["'])[^'\"]+/gm matches already replaced strings.

Uses the newly generated unique key instead of the original JSON key to avoid duplicate usage.

Tooltip data comes from the JSON (see Path and JSON).

4. JSON Flattening

Flattening principle: concatenate all parent keys that have a value using “.” as a separator.

Flattening is invoked via right‑click on a folder or JSON file; it creates/updates xxx_flat.json alongside the original file.

5. Path and JSON Configuration

The project root is identified by the presence of package.json. The default JSON path is [root]/src/locales/zh-cn.json. Customizable options include:

Default Locales Path – a string to replace the default folder.

Parent Dir Level – number of parent directories to prepend to the key name.

Module Prefix for Update JSON – a string prefixed to the key hierarchy.

Other flags: Not Alert Before Update I18n – if true, updates JSON without confirmation. Do Not Disturb – if true, disables all command prompts. I18n Value Hover – enables hover tooltip (default true).

6. Code Completion

Pattern tt expands to {{$t('clipboard content')}}.

Pattern t expands to $t('clipboard content') (manual addition of colon may be required).

Pattern ttt expands to this.$t('clipboard content').

Other Tips

VS Code regex [\u4e00-\u9fa5] finds Chinese characters.

Use the VS Code extension “expand‑region” to enlarge selections for easier copying.