如何在VSCode中快速批量查找未翻译的静态文本并替换？

本文共计578个文字，预计阅读时间需要3分钟。

原文：

在将 i18next 集成到已有 React 项目时，一个常见痛点是：大量按钮文案、标题、提示语等仍以纯字符串形式硬编码在 JSX 中（例如 <Button>Save</Button> 或 <ContentWrapper title="Connection">），尚未包裹 t() 函数。手动逐个查找效率极低，且易遗漏。VSCode 内置的「查找与替换」支持强大正则引擎，可精准匹配这类模式，并实现一键标准化转换。

✅ 推荐正则方案（支持多行与空白容错）

在 VSCode 的「替换面板」（Ctrl+H / Cmd+H）中，*启用「正则表达式」模式（. 按钮）**，输入以下内容：

• 查找（Find）：

  (<Button[\s\S]*?>[\s\n]*)(\w+)([\s\n]*</Button>)

• 替换（Replace）：

  $1{t('$2')}$3

⚠️ 注意事项与进阶建议

• 谨慎处理非 Button 场景：上述正则专为 <Button>Text</Button> 设计。若需覆盖 <div>Connection</div> 或 title="Connection" 等，需单独编写对应规则，例如：

  (title=")([^"]+?)(")

  替换为：$1{t('$2')}$3

• 避免误匹配已翻译内容：正则默认会跳过已含 t( 的行（如 {t('Save')}），但建议先「查找全部」预览结果，确认无误后再执行替换。

• 保留原始语义与大小写：$2 捕获原字符串（如 Start → {t('Start')}），无需手动调整大小写，后续由 i18n JSON 文件统一管理翻译。

• 扩展性提示：对于更复杂场景（如带插值的文本 Hello {name}），建议改用 ESLint 插件（如 eslint-plugin-i18next）进行静态检查，实现长期可维护性。

通过该方法，你可在数分钟内完成数百处静态文本的初步国际化改造，大幅提升迁移效率，同时保持代码结构整洁、语义清晰。