Многие проекты начинают с простого «показа» текста, но со временем это приводит к проблемам поддержки и расширения. В статье мы покажем, как быстро найти все случаи русских строк, вынести их в i18n‑слой, защитить от случайных изменений и убедиться, что приложение корректно реагирует на отсутствие переводов. Это полезно как для новичков, так и для тех, кто уже работает с локализацией, но хочет улучшить процессы.
Context and practical value
Видео описывает процесс обнаружения русских строк в клиентском коде, их перенос в слой i18n, добавление guard‑проверок и негативных тестов. В описании упоминаются ключевые шаги и инструменты, но не приводятся конкретные команды или версии.
В статье мы систематизируем и расширяем информацию, добавляем практические примеры, структуру файлов, кодовые шаблоны и рекомендации по тестированию, которые не раскрыты в видео.
Tutorial profile
- Format: how_to
- Topic: i18n
- Audience: intermediate
Key takeaways
- Методы поиска зафиксированного текста в коде.
- Структура и формат файлов i18n для JavaScript/React.
- Как добавить guard‑проверки и негативные тесты для i18n.
1. Поиск хардкода
Используем grep, ripgrep или IDE‑фильтры, чтобы найти все строки, содержащие русские символы. Важно исключить комментарии и строки в тестах, если они не предназначены для UI.
2. Создание файлов i18n
Определяем структуру JSON/YAML файлов, где ключи описывают смысл, а значения – переводы. Пример: "welcomeMessage": "Добро пожаловать".
3. Замена строк в коде
Заменяем прямые строки на вызовы функции t('key') или аналогичной, которая берёт перевод из контекста. Учитываем параметры, если строка содержит переменные.
4. Добавление guard‑проверок
Внедряем проверку, что ключ существует в текущем locale. Если нет – выводим предупреждение в консоль и показываем fallback‑текст.
5. Негативные тесты
Пишем тесты, которые удаляют ключ из файла и проверяют, что приложение не падает, а выводит fallback. Это гарантирует устойчивость к ошибкам в переводах.
Practical next steps
- Запустить ripgrep "[А-Яа-яЁё]" в корне проекта.
- Создать каталог locales/ru.json и добавить найденные строки как ключ‑значение.
- Внедрить функцию t(key) и заменить все прямые строки.
- Добавить guard: if (!t(key)) console.warn('Missing translation for', key);
- Написать Jest‑тест, который временно удаляет ключ и проверяет fallback.
Limits and verification
- Метод поиска может пропустить строки, содержащие только часть русских слов или использовать Unicode‑экранирование.
FAQ
Можно ли использовать один файл i18n для всех языков?
Да, обычно создаётся один файл для каждого языка, но можно объединить в один JSON с вложенными объектами, если проект небольшой.
Как обрабатывать динамические строки с переменными?
Включайте плейсхолдеры, например "Hello, {name}", и используйте библиотеку, которая заменит их во время рендеринга.