/vsc-vue-i18n

🌐 Vue 国际化开发助手,快速为中文 Vue 项目添加国际化支持

Primary LanguageTypeScriptMIT LicenseMIT

Vue 国际化开发助手

本插件用于 Vue 项目添加国际化支援辅助开发之用。可以快速为项目添加国际化支援,同时提供了国际化的翻译功能。

✨ 功能

  1. 识别 Vue 文件中的中文文本;
  2. 自动生成 key;
  3. 生成翻译文件;
  4. 导出翻译结果;

💻 使用

  1. 打开 Vue 文件,点击右上角的自动识别中文:
  2. 稍等片刻,待其识别完成后,会打开编辑界面:
  3. 确认 Vue 文件是否还有遗漏的需翻译的中文字符串。如果有,则选中后点击浮窗的添加到国际化
  4. 对于不需要翻译的位置,鼠标移动到翻译项位置,点击出现的 移除翻译位置 即可:
    图 6
  5. 添加完成后,点击国际化 Key后的按钮自动生成。自动生成国际化 Key:
    图 2
  6. 点击操作的删除按钮可以删除国际化项目,跳转按钮可以跳转到国际化的行。
    图 4
  7. 最后,点击导出按钮,弹出的文件夹选择框选择导出的目的地。确定后就会开始导出,同时会将国际化 Key 使用 $t('key') 插入到代码中,只要再在代码中加入实现或导入 $t 函数即可。
    图 5
    图 7

📦 配置

插件的配置项如下:

  • front-i18n.appId: 百度翻译接口 appId,若不设置则无法自动生成 Key 与自动翻译导出结果。申请方法见百度翻译文档
  • front-i18n.appKey: 百度翻译接口 API Key,若不设置则无法自动生成 Key 与自动翻译导出结果。申请方法见百度翻译文档
  • front-i18n.i18nFunctionName: 插入到代码的 i18n 函数名,默认为 $t
  • front-i18n.autoTranslateResult: 是否自动翻译导出结果,默认为 false
  • front-i18n.exportLanguageExcel:是否导出翻译结果 Excel,默认为 false
  • front-i18n.languages: 导出的语言列表,支援的语言列表见百度翻译文档。默认为 ['en']

⚙️ 调试

若有更新维护,需要调试代码,可以按照以下步骤进行:

  1. 安装依赖:npm install
  2. 终端执行 npm run dev
  3. 按下 F5 即可调试。

extension 的代码可以直接下断点调试。

Webview 代码则在启动的 扩展开发宿主 按下 Ctrl + Shift + I 启动开发者工具调试。

启动开发者工具后,可按下 Ctrl + Shift + C 选择要调试的Webview。然后切换到 Console 选项卡,查看 Webview 的 id:
1709711786527

然后切换到 Source 选项卡。在左侧的文件列表中该 id 目录,展开找到 localhost:5173 即可对 Webview 代码下断点调试。
1709711923903

📄 Release Notes

0.0.2

  • 新增追加到文件功能;
  • 修正若干识别与替换 bug;

0.0.1

  • 初版发布。