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

Преобразование существующего React-приложения для поддержки нескольких языков иногда становится утомительным процессом поиска жестко закодированных строк и замены их на ключи перевода.

CLI Lingo.dev работает безупречно с ИИ-инструментами, такими как Cursor, GitHub Copilot и другими, чтобы автоматизировать извлечение переводимого контента из ваших React-компонентов.

Концепция, описанная ниже, может быть использована для любого стека технологий, но для простоты и демонстрации идеи мы используем пример React-приложения "Hello World".

Предварительные требования

Перед извлечением ключей настройте базовую интернационализацию в вашем React-приложении. Для полного руководства по настройке обратитесь к документации react-intl.

После выполнения настроек интернационализации для вашего стека технологий ваш проект должен иметь:

  • Возможность динамически переключаться между языками в приложении
  • Базовую структуру проекта для организации файлов перевода

Процесс настройки

Установите и настройте CLI Lingo.dev:

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"]
    }
  }
}

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

Выберите ваш React-компонент и используйте ваш ИИ-инструмент для извлечения жестко закодированных строк:

До извлечения:

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. Соблюдайте единообразие в именовании

Запрос для ИИ:

Извлеките все жестко закодированные строки из React-компонентов и:

1. Замените на react-intl:
   - Используйте хук useIntl для динамических строк
   - Используйте FormattedMessage для статического текста
   - Добавьте форматирование ICU для переменных ({name}) и множественных форм ({count})

2. Структурируйте ключи перевода:
   - Группируйте по иерархии компонентов (components.*, pages.*)
   - Используйте описательные вложенные ключи (header.nav.home)
   - Соответствуйте структуре компонентов в JSON

3. Обновите локали:
   - Добавьте все ключи в src/locales/en.json
   - Соблюдайте единообразие именования по всему приложению

После извлечения ИИ:

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"
}

Пакетная обработка

Для нескольких компонентов выберите все файлы и используйте один и тот же универсальный запрос. ИИ IDE, такие как Cursor, GitHub Copilot и другие, могут обрабатывать несколько файлов одновременно, сохраняя единообразие имен ключей в вашем приложении.

Генерация переводов

После того как ваш ИИ 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>