vue-i18n-kit 0.2.1 — редактор локалей, CLI-инструменты и вшивание переводов в бандл

Что нового

Phantom keys — ключи-призраки

Раньше редактор умел находить «лишние» ключи — те, что есть в JSON, но нигде в коде не используются. Теперь добавилась обратная проверка.

Phantom keys — это ключи, которые есть в коде (t('profile.avatar.upload')), но которых нет ни в одном файле локалей. Приложение вызовет t() — и получит пустую строку или fallback.

На дашборде появилась отдельная карточка с красным счётчиком и список всех таких ключей. В таблице редактора — фильтр phantom, который мгновенно показывает только их.

Неудобно узнавать о таких вещах в продакшене.

Plural preview

Для ключей с ICU-плюрализацией ({count, plural, one {# товар} few {# товара} many {# товаров} other {# товаров}}) теперь есть таблица предпросмотра прямо в панели детали.

Раскрываешь ключ — и видишь, как он рендерится для n = 0, 1, 2, 5, 11, 21 по каждой локали одновременно.

Читать переведённую форму в сборе гораздо удобнее, чем мысленно разбирать ICU-шаблон.

Добавить локаль прямо из UI

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

Открывается диалог: код локали (с валидацией BCP 47), путь к файлу (подставляется автоматически), название и флаг — опционально. Нажимаешь — файл создаётся, конфиг обновляется, локаль появляется в таблице.

CLI: merge — слияние словарей

vue-i18n-kit merge shared/base.json --dry
vue-i18n-kit merge shared/base.json

Берёт JSON-файл и deep-merge'ит его в файлы локалей проекта. По умолчанию добавляет только отсутствующие ключи, не трогая переведённые. --overwrite — перезаписывает всё. --locale ru — только в одну локаль.

Удобно для корпоративных словарей в монорепо: храните общие термины в одном месте и прогоняете merge после каждого обновления.

CLI: prune — удаление мёртвых ключей

vue-i18n-kit prune --dry   # посмотреть, что будет удалено
vue-i18n-kit prune          # применить

Сканирует исходники проекта — ищет все вызовы t(), tm(), $t(). Потом проходит по файлам локалей и удаляет всё, что в коде не встречается.

--dry показывает список без записи. --entries i18n-tools/locales.entries.json позволяет пропустить сканирование и использовать уже готовую карту — быстрее в CI.

Перед релизом пробежаться — хорошая привычка.

Config: extends — базовый словарь

В i18n-kit.config.json появилось поле extends:

{
  "extends": "../../shared-i18n",
  "localesDir": "src/locales",
  ...
}

Указываете путь к папке с базовыми локалями (или к другому конфигу). При запуске редактора базовые ключи подмешиваются под проектные — проект всегда побеждает.

Хорошо ложится на схему: компания держит общий словарь, каждый продукт его наследует и переопределяет то, что нужно.

Vite plugin: inline-переводы

// vite.config.ts
import { vueI18nInlinePlugin } from 'vue-i18n-kit/vite'

export default defineConfig({
  plugins: [
    vueI18nInlinePlugin({
      locales: {
        en: 'src/locales/en.json',
        ru: 'src/locales/ru.json',
      },
    }),
  ],
})

// main.ts
import inlineLocales from 'virtual:vue-i18n-kit/locales'

app.use(createVueI18nPlugin({
  locales: {
    en: { messages: inlineLocales.en, meta: { display: 'English' } },
    ru: { messages: inlineLocales.ru, meta: { display: 'Русский' } },
  },
  defaultLocale: 'en',
}))

Переводы вшиваются в бандл на этапе сборки как статический объект. Никаких сетевых запросов в рантайме, никакого loading состояния.

Полезно для SSR, офлайн-приложений или просто когда хочется убрать один сетевой запрос.

Мелкие фиксы

• Клик по ячейке — инпут теперь сразу получает фокус. Это был баг с ref внутри v-for: Vue складывал его в массив, focus() молча не вызывался.
• Кнопки подтверждения/отмены редактирования теперь стоят рядом горизонтально, а не друг под другом.
• Чекбоксы заменены на кастомный компонент в тёмном стиле — с поддержкой indeterminate для заголовка таблицы.

Итого

Версия 0.2.1 на npm.

npm install vue-i18n-kit@latest

Исходники и полный CHANGELOG — на GitHub.