💡 忍不了繁琐的 i18n ？这款 VSCode 插件让你效率直接起飞！

Jensen麻瓜
406 阅读6分钟

大家好，我是 Jensen。作为一个常年奋战在一线的前端开发，每次接到项目国际化（i18n）  的需求时，我的内心都是崩溃的 😫。

  • “这个 t('key') 到底对应的是啥文案？”  —— 来回切语言文件查到眼瞎。
  • “又有几百个新词条要翻译，CV工程师已上线...”  —— 手动操作繁琐易错。
  • “这个文案没定义，页面直接显示 key 了！”  —— 线上事故警告。
  • “这个词条好像没用了，但又不敢删...”  —— 项目日渐臃肿。

现有的工具总感觉不太满意，要么功能单一，要么配置复杂。于是，我耗时一年亲手打造了一个智能前端国际化助手 —— i18n Mage (国际化巫师) 🧙。

它不只是一个简单的代码提示插件，而是一个从创建、翻译、管理到维护的全链路解决方案，目标是让 i18n 工作变得轻松、高效、甚至有点愉悦！

🪄 它能做什么？核心功能一览

i18n Mage 深度集成于 VSCode，为你提供以下超能力：

  1. 🌳 翻译词条总览面板：在侧边栏直观查看所有词条、缺失状态、同步情况，并提供一键操作入口。

    overview.png

  2. 🧠 翻译内联提示：直接在代码中的 t('key') 处显示翻译文本，无需跳转文件，一目了然。
    image.png

  3. 🚧 缺漏翻译一键补全：集成多家翻译 API（Google, DeepSeek, 百度, 腾讯），一键自动翻译所有缺失词条，支持预览校对。
    1.gif

  4. 🧩 未定义词条自动修复：写 t('中文文案') 也能自动帮你生成 key 并写入语言文件！支持多种命名风格（驼峰、蛇形等）。
    fixUndefinedTranslation.gif 如上图所示，写中文文案 -> 插件调用翻译服务 -> 一键修复为标准 key -> 自动将翻译写入语言文件。流程丝般顺滑！

  5. 🕵️ 未使用词条检测：智能分析项目，找出未被使用的词条，放心大胆地清理，为项目减负。
    checkUsage.gif

  6. 📊 Excel 导入导出：轻松与翻译团队协作，导出 Excel 文件让他们翻译，完成后一键导入回项目。 excel.png

  7. 📋 复制当前页翻译：支持复制当前页翻译键值对，迅速迁移模块翻译到其他项目。 copyCurrentPage.gif

🛠️ 如何快速上手？

只需四步，立即体验魔法：

  1. 安装插件：
    在 VSCode 扩展商店中搜索 i18n Mage 或直接访问 Marketplace 链接。

  2. 打开面板：

    • 启用后，插件会自动扫描项目中的语言文件目录。
    • 点击侧边栏的巫师图标 🧙 打开管理面板，可以查看翻译信息和操作功能按钮。

  3. 设置语言：

    • 在面板中，“同步情况”区域会显示所有有效的语言文件名称。
    • 可右键将某语言设置为“显示语言”或“翻译源语言”。 image.png

  4. 配置翻译服务（可选）：

    • 支持谷歌、DeepSeek、百度、腾讯。
    • 配置路径：设置 -> 扩展 -> i18n Mage -> 翻译服务

⏩ 更详细的配置请查看文末的文档链接。

🎯 适用人群

  • 所有需要开发国际化应用的前端开发者（Vue / React / 任何框架）
  • 正在被繁琐的 i18n 流程折磨的开发者
  • 想要提升项目 i18n 代码质量和可维护性的团队领导者

🆚 为什么要重复造轮子？

众所周知，i18n Ally 是一款非常优秀且成熟的 VSCode 国际化插件，也是我开发 i18n Mage 的启蒙。我深知“重复造轮子”的意义不大，但在使用 i18n Ally 的过程中，我发现了一些可以优化和深挖的点，这促使我决定打造一款想要更贴合国内开发者习惯、开箱即用、且在某些核心体验上更极致的工具。

1. ⚙️ 追求更简单的配置与操作

i18n Ally 功能强大，但配置项也相对复杂，新手有时会遇到“配置好了却无法识别语言目录”的困扰。i18n Mage 在这方面做了优化：

  • 智能分析项目结构，极大减少了手动配置步骤。
  • 功能入口高度集成：将“检查”、“修复”、“导入导出”等核心功能以按钮形式整合在可视化面板中，并配以快捷键，旨在降低用户的理解和操作成本。

2. 🔍 更强大准确的词条使用率分析

i18n Ally 的词条使用情况检测相对简略，而这正是 i18n Mage 的发力点：

  • 深度处理动态 Key：优化了对 t("prefix" + key + "suffix") 等动态拼接情况的识别，使用率判断更准确。
  • 扫描字符串文本：可选地扫描代码中的字符串文本，将其视为可能使用的 Key，避免误判。
  • 性能优化，实时检测：分析速度更快，因此可以默认开启实时检测，让你随时掌握项目状况。

3. 🛠️ 支持 JS/TS 文件写入

i18n Ally 主要针对 JSON 等文件，而 i18n Mage 支持对 .js 和 .ts 语言文件进行写入，适应更广泛的项目结构。

4. 🤝 更“简单粗暴”的团队协作流程

i18n Ally 提供了基于编辑器的评论、建议等协作流程，功能强大但稍显复杂。
i18n Mage 则采取了另一种思路：

  • Excel 导入导出：直接通过一份简单的 Excel 表格与翻译团队进行数据交换。这种方式虽然“传统”，但对于很多团队来说反而更清晰、更直接，降低了非技术人员的参与门槛。

5. 🇨🇳 更接地气的本土化体验

  • 内置国内翻译 API：开箱即用百度、腾讯、DeepSeek等翻译服务，访问速度快。
  • 中文原生支持：从配置界面到文档，均为中文优先，减少理解偏差。

🤝 期待你的反馈

i18n Mage 作为一款由我个人维护、开发刚满一年的插件，仍在不断成长中。如果你在试用过程中遇到任何 Bug，或者有更好的想法，非常欢迎在 GitHub Issues 提出。我也会持续迭代，未来计划加入如智能中文文案提取等更多提升开发效率的功能。

插件已经完全免费开源！如果它帮到了你，请不要吝啬你的：

  • ⭐ Star: github.com/baimohui/i1…
  • 📖 反馈与贡献：欢迎提交 Issue 和 PR！
  • 📢 分享：把这篇文章分享给你身边正在受 i18n 折磨的队友们！

任何建议和想法，都可以在评论区留言，我会第一时间回复！

📖 附：详细配置文档

插件提供了超过 50 项精细配置，满足你的各种定制化需求（框架适配、代码风格、翻译服务等）。
👉 查看完整配置文档

希望 i18n Mage 能成为你开发工具箱中不可或缺的一员，让你的国际化开发体验焕然一新！

Happy Coding! 🎉

avatar
文章
阅读
粉丝