Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**提取要求：**\n\n1. 使用 react-intl 的钩子和组件替换硬编码字符串\n2. 对变量和复数使用 ICU 格式化\n3. 按组件组织结构分层结构化键\n4. 将所有键添加到源 JSON 文件中\n5. 保持一致的命名约定\n\n**AI 提示：**\n\n```\n从 React 组件中提取所有硬编码字符串，并：\n\n1. 替换为 react-intl：\n - 对于动态字符串，使用 useIntl 钩子\n - 对于静态文本，使用 FormattedMessage\n - 对变量（{name}）和复数（{count}）使用 ICU 格式化\n\n2. 结构化翻译键：\n - 按组件层次结构分组（components.*，pages.*）\n - 使用描述性、嵌套的键（header.nav.home）\n - 在 JSON 中匹配组件结构\n\n3. 更新语言文件：\n - 将所有键添加到 src/locales/en.json\n - 在整个应用程序中保持一致的命名\n```\n\n**AI 提取后：**\n\n```jsx\nimport { useIntl } from \"react-intl\";\n\nfunction WelcomeCard() {\n const intl = useIntl();\n\n return (\n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

\n );\n}\n```\n\n**生成的 en.json：**\n\n```json\n{\n \"welcome.title\": \"Welcome to our platform\",\n \"welcome.description\": \"Start your journey with us today\",\n \"welcome.getStarted\": \"Get started\"\n}\n```\n\n## 批量处理\n\n对于多个组件，选择所有文件并使用相同的综合提示。像 Cursor、GitHub Copilot 等 AI IDE 可以同时处理多个文件，确保在整个应用程序中保持一致的键命名。\n\n## 翻译生成\n\n一旦您的 AI IDE 提取了键，就生成翻译：\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\n这将创建源文件的翻译版本：\n\n```bash\nsrc/locales/\n en.json (包含提取键的源文件)\n es.json (西班牙语翻译)\n fr.json (法语翻译)\n de.json (德语翻译)\n```\n\n## 验证\n\n提取后，验证您的设置：\n\n**检查翻译覆盖率：**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\n此命令会在任何翻译缺失时失败，以确保翻译完全覆盖。\n\n**使用不同的语言环境进行测试：**\n\n```jsx\n// 切换应用程序中的语言环境以验证翻译是否有效\n\n \n\n```\n","content","\n将现有的 React 应用程序转换为支持多语言有时是一个繁琐的过程，需要找到硬编码的字符串并将其替换为翻译键。\n\n**Lingo.dev CLI** 可以与 Cursor、GitHub Copilot 等 AI 驱动的 IDE 无缝协作，从您的 React 组件中自动提取可翻译的内容。\n\n以下解释的概念可以应用于任何技术栈，但为了简单起见并演示该想法，我们将使用一个 Hello World 的 React 应用程序作为示例。\n\n## 前置条件\n\n在提取键之前，请在您的 React 应用程序中设置基本的国际化。有关完整的设置说明，请参阅 [react-intl 文档](https://formatjs.io/docs/react-intl/)。\n\n在为您的技术栈完成国际化设置后，您的项目应具备：\n\n- 能够在应用程序中动态切换语言\n- 用于组织翻译文件的基本项目结构\n\n## 设置过程\n\n**安装并配置 Lingo.dev CLI：**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**创建空的源文件：**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**配置 i18n.json：**\n\n```json\n{\n \"locale\": {\n \"source\": \"en\",\n \"targets\": [\"es\", \"fr\", \"de\"]\n },\n \"buckets\": {\n \"json\": {\n \"include\": [\"src/locales/[locale].json\"]\n }\n }\n}\n```\n\n## 使用 AI 提取键\n\n**选择您的 React 组件** 并使用您的 AI IDE 提取硬编码字符串：\n\n**提取前：**\n\n```jsx\nfunction WelcomeCard() {\n return (\n

Welcome to our platform

Start your journey with us today

\n \n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

使用 AI 提取 i18n 键