每一个前端开发者的 i18n 噩梦

做过国际化的同学，心里大概都有本血泪账。

i18n 本质上不是技术难题，它既没有高并发压力，也没有复杂的算法。它的难，在于**“琐碎”和“反人性”**。

设想一下你平时的开发链路：

1. 发现文案：在 UI 稿里看到一段“确认删除”。

2. 打断思维：停下手里的业务逻辑，去想这个 key 叫 common.delete_confirm 还是 action.delete_item？

3. 人肉搬运：打开 zh-CN.json，跳到文件末尾，加上键值对；再打开 en.json，加上空的 key（或者去翻词典翻译一下）。

4. 代码替换：回到业务代码，把中文删掉，写上 t('common.delete_confirm')。

5. 循环往复：一个页面如果有 50 处文案，你就得重复这套动作 50 次。

这不叫编程，这叫“代码搬运工”。 更可怕的是，随着项目变大，你会发现 en.json 漏了 key，或者 zh-CN.json 里有一堆没人用的“僵尸文案”，整个国际化体系开始坍塌。

这就是我开发 I18n Workflow Helper 的原因：把国际化从“额外负担”拉回开发流程本身。

---

重新定义：是 Workflow，不是 Framework

市面上有很多 i18n 库（i18next, vue-i18n, react-intl），它们解决的是运行时如何显示语言。

但 I18n Workflow Helper 解决的是开发时如何维护这些语言。它不改变你的代码逻辑，它只是你 VS Code 里的一个“超级助手”。

---

核心功能深度解析

 一、文案提取：不再人肉搬运

当你选中文中一段硬编码的中文时，按下快捷键（或通过 Command Palette）：

• 自动替换：代码里的 <span>确认</span> 瞬间变成 <span>{t('common.confirm')}</span>。

• 跨文件同步：它会智能识别你的 locales 目录，同时在 zh-CN.json 写入中文，在 en.json（或其它语言）自动补齐这个 key，并预留空值或默认值。

底层逻辑： 保持思维连贯性。你不需要离开当前的业务文件，所有的 JSON 维护工作都在后台静默完成。

 二、工作区扫描：给项目做一次国际化体检

很多项目在上线前，最怕的就是漏掉哪里的中文没改。 执行 i18n: Scan Workspace 后，插件会像 Linter 一样扫描整个工程：

• 硬编码检测：找出代码里所有遗漏的、未经过 t() 函数处理的文本。

• 缺失校验：代码里写了 t('user.name')，但 JSON 文件里根本没定义？直接标红。

• 冗余清理：找出那些 JSON 里存在、但代码里早已删掉的“僵尸 Key”。

• 结构对齐：对比 zh-CN 和 en，如果 A 有 B 没有，立即指出。

三、导入 Diff 预览：给盲目覆盖装上刹车

这是很多团队的痛：翻译老师给了一份巨大的 JSON，你敢直接覆盖吗？

• 预览模式：插件会生成一个类似 Git Diff 的预览界面。

• 清晰标注：哪些是新增的词条？哪些是修改了现有翻译？

• 局部应用：你可以选择只接受一部分变更。 这让“导入翻译”从一次冒险变成了一次受控的代码变更。

---

为什么我刻意不做自动翻译？

很多人问我：既然都做 VS Code 插件了，为什么不顺便接个 Google 翻译 API？

我的回答是：为了项目的严谨性。

1. 语境问题：AI 或机器翻译很难理解业务语境（比如“Cancel”在某些场景下应该叫“取消”，某些场景叫“作废”）。

2. 流程解耦：我希望这个工具是流程驱动的。翻译应该是专业人员或开发者确认后的结果。

3. 纯粹性：我不想让这个工具变成一个“翻译工具”，它应该是一个“工程化工具”。

---

真实场景演进：从零到一的治理

如果你的项目目前一团糟，可以试试这套“三步走”方案：

1. 第一步：全局扫描。用 Scan Workspace 找出所有的硬编码文案，生成一份“欠账清单”。

2. 第二步：一键提取。利用插件的提取功能，快速把老代码重构成 i18n 模式。

3. 第三步：常态化维护。在日常开发中，通过 Explorer 视图随时查看语言文件的 key 数量和完整度。

---

开发者寄语：做更纯粹的开源

这个项目目前对 React、Vue、TS/JS 提供了深度支持。我并没有把它做成一个闭源的商业产品，而是放在了 GitHub 上。

开源边界：

• 插件目前在处理复杂 AST 嵌套（比如模版字符串里套函数）时仍在不断优化。

• 多工作区（Multi-root Workspace）的支持正在重构中。

这些不完美的点，正是开源的魅力所在——欢迎大家来提 PR 或者 Issue。

国际化从来不只是“接一个库”，而是要把一套容易失控的协作流程变得可持续。

如果你也厌倦了在 JSON 和业务代码之间反复横跳，厌倦了在上线前人肉搜索 [\u4e00-\u9fa5]（中文正则），那么 I18n Workflow Helper 或许就是你需要的那个“最后一块拼图”。

项目地址： GitHub - OpenLucasKaka/i18n-workflow-helper 立即体验： VS Code 插件市场搜索 I18n Workflow Helper。