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

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

Lingo.dev CLI отлично работает с IDE на базе ИИ, такими как Cursor, GitHub Copilot и другими похожими инструментами, чтобы автоматизировать извлечение переводимых строк из ваших 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"]
    }
  }
}

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

Выберите ваш React-компонент и используйте ИИ-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-промпт:

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

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

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

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

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

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

Когда ваш AI IDE извлечёт ключи, сгенерируйте переводы:

npx lingo.dev@latest run

Это создаёт переведённые версии исходного файла:

src/locales/
  en.json    (source with extracted keys)
  es.json    (Spanish translations)
  fr.json    (French translations)
  de.json    (German translations)

Валидация

После извлечения проверьте вашу настройку:

Проверьте покрытие переводов:

npx lingo.dev@latest run --frozen

Эта команда завершится с ошибкой, если какие-либо переводы отсутствуют, что гарантирует полное покрытие.

Тестируйте с разными локалями:

// Switch locale in your app to verify translations work
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>