vue-i18n-kit: Locale Editor UI — дашборд, группы ключей и валидация

Несколько дней назад я показывал альфа-версию Locale Editor UI. Собрал фидбек, добавил то, без чего редактором было неудобно пользоваться, и убрал то, что раздражало.

Теперь это не просто «таблица с ячейками», а полноценный инструмент для работы с переводами.

Начало работы: интерактивный init

Раньше, чтобы настроить локализацию, нужно было запоминать флаги, вручную создавать файлы и думать, как всё связать. Теперь — достаточно одной команды:

npx vue-i18n-kit init

Дальше мастер сам:

• Найдёт в проекте вызов createVueI18nPlugin (если он есть) или предложит создать конфиг с нуля
• Распарсит все подключённые локали, их пути и метаданные
• Сформирует единый i18n-kit.config.json, который теперь используют и CLI, и UI-редактор
• При необходимости добавит vueI18nMapPlugin в vite.config.ts или nuxt.config.ts

То есть ты просто отвечаешь на вопросы — пакет сам понимает, где лежат файлы, какие языки уже есть и что нужно для работы редактора. init можно запускать повторно — он не сломает существующие настройки, а только обновит то, что изменилось.

Без этого auto-config и удобный ui просто не взлетели бы. Новый init — это фундамент, на котором держится весь остальной функционал.

Что нового

Дашборд

При входе в редактор (vue-i18n-kit ui) вы видите не пустую таблицу, а обзорную панель:

• Общий прогресс по всем локалям — планка покрытия и количество недостающих ключей для каждого языка
• Карточки неймспейсов — кликабельные, ведут прямиком в нужную группу ключей в редакторе
• Дублирующиеся значения — ключи, где все локали имеют одинаковое непустое значение (скорее всего, забыли перевести)
• Неиспользуемые ключи — ключи, на которые нет ни одного вызова t()/tm()/$t() в исходниках

Группировка ключей по неймспейсам

Раньше все ключи были плоским списком — на 200–300 строк это читалось, но на 1000+ превращалось в кашу.

Теперь ключи автоматически группируются по префиксам с точкой. Например:

• auth.form.label.email
• auth.form.label.password
• auth.form.button.submit

Превращаются в:

auth
  form
    label
      email
      password
    button
      submit

Группы можно сворачивать и разворачивать, поддерживается любая вложенность. Для каждой группы доступны операции: добавить подгруппу, добавить ключ, переименовать неймспейс (все ключи группы переименовываются автоматически), удалить группу со всеми ключами.

Действия над ключами

При наведении на ключ появляются иконки:

• Переименовать
• Дублировать
• Добавить/редактировать заметку
• Удалить

Удалять можно и группами — появились чекбоксы для рядов и массовая операция удаления.

Валидация ячеек

Редактор теперь подсвечивает потенциальные проблемы прямо в таблице:

• Несовпадение плейсхолдеров ({var}) с эталонной локалью
• Несовпадение HTML-тегов
• Ошибки ICU-синтаксиса (несбалансированные фигурные скобки, отсутствующая категория other)
• Слишком длинные значения (больше чем в эталонной локали в 2.5 раза)

Жёлтое или красное подчёркивание — и вы сразу видите, что именно не так.

Пусто vs отсутствует

Теперь есть визуальное различие:

• — missing — — ключа нет в файле локали
• — empty — — ключ есть, но значение — пустая строка

Разница важная: "" может быть намеренным (очистили поле ввода), missing — почти всегда ошибка.

Interpolation preview

Рядом с ключом появилась кнопка «показать превью». В выезжающей панели можно подставить значения для переменных и увидеть, как будет выглядеть финальный перевод на каждом языке. Без запуска приложения, прямо в редакторе.

Интеграция с IDE

В панели использования ключа (usage map) теперь показываются не только файлы, но и кликабельные чипсы. Нажал — и файл открылся в вашей IDE: VS Code, Cursor, WebStorm, PhpStorm, IntelliJ.

Автоперевод пропущенных значений

Добавил интеграцию с LibreTranslate (можно использовать как публичное API, так и свой self-hosted инстанс). Кнопка «Translate missing» в тулбаре — и все недостающие ключи заполняются машинным переводом с эталонной локали. Не идеально, но лучше пустых ячеек.

Git status

Заголовки столбцов подсвечиваются, если соответствующий JSON-файл имеет некоммитнутые изменения (git status --porcelain). Не запутаетесь, что уже сохранили, а что ещё нет.

Live reload

Редактор соединяется с сервером через SSE. Если кто-то изменил локаль на диске (например, после git pull или правки в другом редакторе), таблица обновляется автоматически без перезагрузки страницы. Зелёная точка в шапке показывает, что соединение активно.

Прочее

• Quick Open (Ctrl+P) — поиск ключа по имени с быстрым переходом
• Find & Replace (Ctrl+H) — поиск по значениям с предпросмотром замен
• Undo (Ctrl+Z) — до 100 последних изменений
• Export/Import CSV — скачать все переводы или загрузить с предпросмотром диффа
• Sort keys — отсортировать все ключи алфавитно во всех файлах сразу
• Density toggle — компактный / обычный / свободный режим отображения

Как это выглядит под капотом

Редактор — это отдельный Vite-сервер, который поднимается командой vue-i18n-kit ui. Он не требует внешнего интернета (кроме опционального LibreTranslate) и работает исключительно с вашими локальными файлами. Изменения пишутся на диск сразу — никаких промежуточных состояний.

Все настройки (ссылочная локаль, схема IDE, параметры LibreTranslate) сохраняются в localStorage и подхватываются при следующем запуске.

CLI тоже обновился

• init теперь работает как интерактивный мастер (см. начало поста)
• init также умеет обновлять существующую конфигурацию и автоматически сканирует проект на наличие вызовов createVueI18nPlugin
• Все команды теперь используют единый конфиг i18n-kit.config.json

Что дальше

Ближайшие планы — автодополнение ключей при редактировании, поддержка YAML и TypeScript-файлов для переводов, а также более умный поиск по ключам.

NPM: https://www.npmjs.com/package/vue-i18n-kit
GitHub: https://github.com/macrulezru/vue-i18n-kit