使用 AI 提取 i18n 键

将现有的 React 应用程序转换为支持多语言有时是一个繁琐的过程，需要找到硬编码的字符串并将其替换为翻译键。

Lingo.dev CLI 可以与 Cursor、GitHub Copilot 等 AI 驱动的 IDE 无缝协作，从您的 React 组件中自动提取可翻译的内容。

以下解释的概念可以应用于任何技术栈，但为了简单起见并演示该想法，我们将使用一个 Hello World 的 React 应用程序作为示例。

前置条件

在提取键之前，请在您的 React 应用程序中设置基本的国际化。有关完整的设置说明，请参阅 react-intl 文档。

在为您的技术栈完成国际化设置后，您的项目应具备：

  • 能够在应用程序中动态切换语言
  • 用于组织翻译文件的基本项目结构

设置过程

安装并配置 Lingo.dev CLI：

npx lingo.dev@latest init

创建空的源文件：

mkdir -p src/locales
echo '{}' > src/locales/en.json

配置 i18n.json：

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

使用 AI 提取键

选择您的 React 组件 并使用您的 AI IDE 提取硬编码字符串：

提取前：

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

提取要求：

  1. 使用 react-intl 的钩子和组件替换硬编码字符串
  2. 对变量和复数使用 ICU 格式化
  3. 按组件组织结构分层结构化键
  4. 将所有键添加到源 JSON 文件中
  5. 保持一致的命名约定

AI 提示：

从 React 组件中提取所有硬编码字符串，并：

1. 替换为 react-intl：
   - 对于动态字符串，使用 useIntl 钩子
   - 对于静态文本，使用 FormattedMessage
   - 对变量（{name}）和复数（{count}）使用 ICU 格式化

2. 结构化翻译键：
   - 按组件层次结构分组（components.*，pages.*）
   - 使用描述性、嵌套的键（header.nav.home）
   - 在 JSON 中匹配组件结构

3. 更新语言文件：
   - 将所有键添加到 src/locales/en.json
   - 在整个应用程序中保持一致的命名

AI 提取后：

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

生成的 en.json：

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

批量处理

对于多个组件，选择所有文件并使用相同的综合提示。像 Cursor、GitHub Copilot 等 AI IDE 可以同时处理多个文件，确保在整个应用程序中保持一致的键命名。

翻译生成

一旦您的 AI IDE 提取了键，就生成翻译：

npx lingo.dev@latest i18n

这将创建源文件的翻译版本：

src/locales/
  en.json    (包含提取键的源文件)
  es.json    (西班牙语翻译)
  fr.json    (法语翻译)
  de.json    (德语翻译)

验证

提取后，验证您的设置：

检查翻译覆盖率：

npx lingo.dev@latest i18n --frozen

此命令会在任何翻译缺失时失败，以确保翻译完全覆盖。

使用不同的语言环境进行测试：

// 切换应用程序中的语言环境以验证翻译是否有效
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>