Vue I18N Ally

基于 AST 解析的 VSCode 插件，自动将中文替换为唯一 key，支持 Vue/TypeScript/JavaScript 项目。

功能特性

🚀 一键扫描 — 自动识别当前文件或整个目录中的中文文案
🎯 精准替换 — 基于 AST 解析，精准定位中文文案，避免误替换
🔑 智能 Key 生成 — 支持语义化 key / MD5 哈希两种生成策略
📦 自动生成语言包 — 自动将原文写入 zh-CN.json，支持同步生成多语言文件
🎨 Monorepo支持 — 支持多项目工程，会根据当前处理的文件自动查找最近的.vscode/setting.json配置
⚙️ 高度可配置 — 支持配置忽略词、文件类型、Key 生成策略等
💬 悬浮翻译提示 — 鼠标悬停在 i18n key 上显示对应的中文翻译，支持一键编辑
📝 行内中文提示 — 在代码行末尾显示 i18n key 对应的中文内容，方便对照
✏️ 可视化翻译编辑器 — 提供 Webview 界面，支持同时编辑多个语言文件中的翻译内容

安装

开发模式安装

# 1. 克隆项目
git clone <repository-url>
cd i18n-auto-plugin

# 2. 安装依赖
yarn

# 3. 编译
yarn compile

# 4. 安装到 VSCode
code --install-extension .

发布到 VSCode Marketplace

# 安装 vsce
npm install -g @vscode/vsce

# 打包
vsce package

# 发布
vsce publish

使用方法

扫描当前文件

在编辑器中打开文件
右键选择 Vue I18N Ally → 扫描当前文件中文并替换为 Key
插件自动将中文替换为 i18n key，并更新配置的语言文件（默认 zh-CN.json）

批量扫描目录

在资源管理器中选择文件夹
右键选择 Vue I18N Ally → 扫描目录中文并替换为 Key
插件递归处理所有文件

编辑多语言翻译

方式一：在代码中将鼠标悬停在 i18n key（如 $t('xxx') 或 i18n.global.t('xxx')）上，点击悬浮提示中的 ✏️ 编辑 按钮
方式二：通过命令面板（Ctrl+Shift+P / Cmd+Shift+P）搜索 "编辑多语言翻译" 触发

在打开的 Webview 编辑器中修改各语言文件的翻译内容，点击保存按钮保存修改并关闭窗口，或点击取消放弃修改。

配置项

在项目根目录创建或修改 .vscode/settings.json 进行配置：

{
  "vue3I18nAlly.i18nFilePath": "/src/locales",
  "vue3I18nAlly.languageFileName": "zh-CN.json",
  "vue3I18nAlly.templateI18nCall": "$t",
  "vue3I18nAlly.scriptI18nCall": "i18n.global.t",
  "vue3I18nAlly.excludedExtensions": [".svg", ".png", ".md", ".css"],
  "vue3I18nAlly.excludedStrings": ["宋体", "黑体", "楷体"],
  "vue3I18nAlly.useMd5Key": false,
  "vue3I18nAlly.autoImportI18n": false,
  "vue3I18nAlly.i18nImportPath": "@/i18n"
}

配置项说明

配置项	说明	默认值
`i18nFilePath`	语言包存放路径（相对于 `.vscode/settings.json` 所在的项目目录）	`/src/locales`
`languageFileName`	语言文件名称	`zh-CN.json`
`languageFiles`	需要同步生成的多语言文件列表（如 `["en.json", "ja.json"]`），value 与中文一致，不会覆盖已有翻译	`[]`
`templateI18nCall`	Vue 模板中使用的 i18n 函数调用方式	`$t`
`scriptI18nCall`	JS/TS 脚本中使用的 i18n 函数调用方式	`i18n.global.t`
`excludedExtensions`	排除处理的文件后缀	`.svg, .png, .jpg, .jpeg, .gif, .md, .css, .scss, .less`
`excludedStrings`	排除替换的字符串（如字体名称）	`宋体, 黑体, 楷体, 微软雅黑, Arial, Helvetica`
`useMd5Key`	是否使用 MD5 哈希生成 key（相同文案生成相同 key）	`false`
`autoImportI18n`	是否自动在脚本中添加 i18n 导入语句	`false`
`i18nImportPath`	i18n 导入路径（当 `autoImportI18n` 为 true 时使用）	`@/i18n`
`autoFormat`	是否自动格式化代码（使用 Prettier）	`false`
`enableInlayHint`	是否在代码行末尾显示 i18n key 对应的中文内容提示	`true`

常见配置示例

Vue 3 + Vue I18n 项目

{
  "vueI18nAlly.languageFileName": "zh-CN.json",
  "vueI18nAlly.templateI18nCall": "$t",
  "vueI18nAlly.scriptI18nCall": "i18n.global.t",
  "vueI18nAlly.i18nImportPath": "@/i18n"
}

自定义语言文件名

{
  "vueI18nAlly.languageFileName": "zh.json",
  "vueI18nAlly.i18nFilePath": "/src/i18n"
}

生成的文件路径为：/src/i18n/zh.json

Key 生成策略

语义化 Key（默认）

格式: 模块名-文件UUID-序号

// 组件: UserList.vue
'用户列表' -> 'user-list-a1b2c3d4-1'
'新增用户' -> 'user-list-a1b2c3d4-2'

MD5 哈希 Key

开启 useMd5Key 后，相同文案始终生成相同的 key：

'用户列表' -> 'a1b2c3d4e5f6'

技术实现

AST 解析

Vue 文件: 使用 @vue/compiler-sfc 编译单文件组件，分离 template / script / style
JS/TS 文件: 使用 Babel 解析 AST，查找字符串字面量

关键库

@babel/parser — Babel AST 解析器
@babel/traverse — AST 遍历
@babel/generator — 代码生成
@vue/compiler-sfc — Vue 单文件组件编译器

项目结构

src/
├── extension.ts                # 插件入口
├── processor/
│   └── fileProcessor.ts        # 文件处理器（扫描 & 替换）
├── provider/
│   ├── i18nHoverProvider.ts    # 悬浮翻译提示（Hover）
│   ├── i18nInlayHintProvider.ts # 行内中文提示（InlayHint）
│   └── i18nWebviewEditor.ts    # 可视化翻译编辑器（Webview）
├── scanner/
│   ├── chineseScanner.ts       # 中文文案扫描器
│   └── vueCompiler.ts          # Vue SFC 编译器
└── utils/
    ├── configManager.ts        # 配置管理
    ├── keyGenerator.ts         # Key 生成器
    └── languageFileManager.ts  # 语言文件管理

开发

# 安装依赖
yarn

# 监听模式编译
yarn watch

# 一键编译、打包、本地安装
yarn dev

# 代码检查
yarn lint

License

MIT

Vue I18N Ally(多语言)

codeByAI