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**Запрос для ИИ:**\n\n```\nИзвлеките все жестко закодированные строки из React-компонентов и:\n\n1. Замените на react-intl:\n - Используйте хук useIntl для динамических строк\n - Используйте FormattedMessage для статического текста\n - Добавьте форматирование ICU для переменных ({name}) и множественных форм ({count})\n\n2. Структурируйте ключи перевода:\n - Группируйте по иерархии компонентов (components.*, pages.*)\n - Используйте описательные вложенные ключи (header.nav.home)\n - Соответствуйте структуре компонентов в JSON\n\n3. Обновите локали:\n - Добавьте все ключи в src/locales/en.json\n - Соблюдайте единообразие именования по всему приложению\n```\n\n**После извлечения ИИ:**\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Для нескольких компонентов выберите все файлы и используйте один и тот же универсальный запрос. ИИ IDE, такие как Cursor, GitHub Copilot и другие, могут обрабатывать несколько файлов одновременно, сохраняя единообразие имен ключей в вашем приложении.\n\n## Генерация переводов\n\nПосле того как ваш ИИ 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**CLI Lingo.dev** работает безупречно с ИИ-инструментами, такими как Cursor, GitHub Copilot и другими, чтобы автоматизировать извлечение переводимого контента из ваших React-компонентов.\n\nКонцепция, описанная ниже, может быть использована для любого стека технологий, но для простоты и демонстрации идеи мы используем пример React-приложения \"Hello World\".\n\n## Предварительные требования\n\nПеред извлечением ключей настройте базовую интернационализацию в вашем React-приложении. Для полного руководства по настройке обратитесь к [документации react-intl](https://formatjs.io/docs/react-intl/).\n\nПосле выполнения настроек интернационализации для вашего стека технологий ваш проект должен иметь:\n\n- Возможность динамически переключаться между языками в приложении\n- Базовую структуру проекта для организации файлов перевода\n\n## Процесс настройки\n\n**Установите и настройте CLI Lingo.dev:**\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## Извлечение ключей с помощью ИИ\n\n**Выберите ваш React-компонент** и используйте ваш ИИ-инструмент для извлечения жестко закодированных строк:\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

Извлечение i18n-ключей с помощью ИИ