VS Code Auto I18n Helper

VS Code Auto I18n Helper 是一款专为前端开发者设计的国际化（I18n）辅助插件。它能够极大简化从代码中提取中文文案、替换为 I18n 语法、以及自动翻译和生成语言包文件的流程。

支持 React 和 Vue (Vue 2 & Vue 3) 项目。

✨ 核心功能

一键批量提取：
- 在资源管理器中右键点击文件，即可扫描并提取文件内的所有中文文案。
- 自动去重、自动生成唯一的 Key（基于 文件名.随机码-序号）。
- 自动将提取的中文保存到指定的 I18n 语言包 JSON 文件中。
智能代码替换：
- React: 自动处理 JSX 属性（label="中文" → label={t('key')}）和 JSX 文本（<div>中文</div> → <div>{t('key')}</div>）。自动插入 import { useTranslation } ... 和 const { t } = useTranslation(...)。
- Vue: 智能识别 <template> 和 <script> 上下文，适配 Vue 2 (this.$t) 和 Vue 3 (t 或 $t) 语法。
自动翻译 (集成百度翻译)：
- 右键点击 I18n 语言包文件（如 zh-CN.json），选择翻译命令。
- 插件会自动读取中文文案，调用百度翻译 API，将其翻译成配置中指定的其他语言（如英语、日语等），并自动填充到对应的语言包文件中。
灵活配置：
- 支持自定义语言包路径、默认语言、模块名前缀等。
- 通过项目根目录下的 i18n-config.json 文件进行管理。

🛠 环境要求

VS Code 版本 1.70.0 或更高。
项目需使用 JSON 格式管理 I18n 语言包。
(可选) 若需使用自动翻译功能，需要申请百度翻译 API 的 AppID 和 Key。

🚀 快速开始

1. 安装插件

在 VS Code 扩展商店搜索 I18n Helper 并安装。

2. 项目配置 (推荐)

在项目根目录下创建一个名为 i18n-config.json 的文件。

React 项目配置示例：

{
  "projectType": "react",
  "defaultLang": "zh-CN",
  "langPaths": "src/locales/modules",
  "langFileSuffix": ".json",
  "tempLangs": ["en"],
  "includeModulePrefix": true,
  "baiduAppid": "你的百度翻译AppID",
  "baiduSecrectKey": "你的百度翻译密钥"
}

Vue 项目配置示例：

{
  "projectType": "vue3", 
  "defaultLang": "zh-CN",
  "langPaths": "src/locales/modules",
  "langFileSuffix": ".json",
  "includeModulePrefix": true
}

3. 配置项说明

配置项	类型	必填	默认值	说明
`projectType`	string	否	`"react"`	项目类型，支持 `"react"`, `"vue2"`, `"vue3"`。决定了代码替换的语法风格。
`defaultLang`	string	否	`"zh-CN"`	默认的主语言 Key。提取的中文将写入该语言对象下。
`langPaths`	string	否	`"src/locales/modules"`	语言包存放目录（相对于项目根目录）。插件会在该目录下查找或创建 JSON 文件。
`langFileSuffix`	string	否	`".json"`	语言包文件的后缀名。
`tempLangs`	array	否	`["en"]`	辅助语言列表。新建模块时，会自动初始化这些语言的空结构；翻译时会翻译到这些语言。
`includeModulePrefix`	boolean	否	`true`	生成的 Key 是否包含模块名。`true` 为 `t('module.key')`，`false` 为 `t('key')`。
`baiduAppid`	string	否	`""`	百度翻译 API AppID（用于自动翻译）。
`baiduSecrectKey`	string	否	`""`	百度翻译 API 密钥（用于自动翻译）。

📖 使用指南

场景一：提取文件中的中文 (最常用)

在 VS Code 左侧资源管理器中，找到你要处理的代码文件（.tsx, .jsx, .vue 等）。
右键点击该文件，选择 提取中文 (Extract Chinese)。
在弹出的输入框中，选择或输入一个 模块名称（例如 home, common）。
- 插件会在 langPaths 目录下查找或创建 [模块名].json 文件。
完成！ 插件会自动：
- 将代码中的中文替换为 t('...')。
- 将提取的中文写入 src/locales/modules/[模块名].json。
- (React) 自动添加 useTranslation 的引入和声明。

场景二：手动选中提取

在编辑器中选中一段中文字符串。
点击鼠标右键，选择 提取中文 (Extract Chinese)。
按照提示选择模块名，并输入一个自定义的 Key（如 btn.submit）。
插件会完成替换和写入操作。

场景三：自动翻译语言包

确保 i18n-config.json 中已配置 baiduAppid 和 baiduSecrectKey。
在资源管理器中找到你的语言包文件（例如 src/locales/modules/home.json）。
右键点击该 JSON 文件，选择 翻译 I18n (Translate I18n)。
插件会自动读取 defaultLang（如中文）的内容，调用翻译 API，将结果填充到 tempLangs（如英文）对应的字段中。
- 注意：已存在的翻译不会被覆盖，插件仅翻译新增或缺失的 Key。

🧩 框架适配细节

React

依赖: 确保项目已安装 react-i18next。
Hooks: 插件会自动检测并插入 import { useTranslation } from 'react-i18next'; 和 const { t } = useTranslation('模块名');。
语法:
- 字符串字面量: label="中文" → label={t('key')}
- JSX 文本: <div>中文</div> → <div>{t('key')}</div>

Vue 2 / Vue 3

自动识别: 插件会根据光标位置判断是在 <template> 还是 <script> 中。
Vue 2 (projectType: "vue2"):
- Template: {{ $t('key') }} 或 :prop="$t('key')"
- Script: this.$t('key')
Vue 3 (projectType: "vue3"):
- Template: {{ $t('key') }}
- Script: t('key') (注意：Vue 3 Script Setup 中需手动引入 useI18n)

⚠️ 注意事项

文件格式: 目前仅支持 JSON 格式的语言包文件。
翻译 API: 自动翻译功能依赖百度翻译通用翻译 API，请确保你的 API 额度充足且网络通畅。
Key 生成规则: 批量提取时，Key 默认为 文件名.随机码-序号（如 Login.83721-0），以防止 Key 冲突。

遇到问题？ 欢迎提交 Issue 或 Pull Request。

Auto I18n Helper

coder.xchen