Официальное расширение VS Code

Обзор

Intlayer — официальное расширение Visual Studio Code для Intlayer, созданное для улучшения опыта разработчика при работе с локализованным контентом в ваших проектах.

Ссылка на расширение: https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension

Возможности

Мгновенная навигация

Поддержка перехода к определению – Используйте ⌘ + Click (Mac) или Ctrl + Click (Windows/Linux) по ключу useIntlayer, чтобы мгновенно открыть соответствующий файл с контентом.
Бесшовная интеграция – Работает без усилий с проектами на react-intlayer и next-intlayer.
Поддержка нескольких языков – Поддерживает локализованный контент на разных языках.
Интеграция с VS Code – Плавно интегрируется с навигацией и палитрой команд VS Code.

Команды управления словарями

Управляйте своими словарями контента прямо из VS Code:

• Сборка словарей – Генерируйте файлы контента на основе структуры вашего проекта.
• Отправка словарей – Загружайте актуальное содержимое словарей в ваш репозиторий.
• Получение словарей – Синхронизируйте актуальное содержимое словарей из репозитория с вашей локальной средой.
• Заполнение словарей – Заполняйте словари контентом из вашего проекта.
• Тестирование словарей – Определяйте отсутствующие или неполные переводы.

Генератор деклараций контента

Легко генерируйте структурированные файлы словарей в различных форматах:

Если вы сейчас работаете над компонентом, он сгенерирует для вас файл .content.{ts,tsx,js,jsx,mjs,cjs,json}.

Пример компонента:

const MyComponent = () => {  const { myTranslatedContent } = useIntlayer("my-component");  return <span>{myTranslatedContent}</span>;};

Сгенерированный файл в формате TypeScript:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "my-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },};export default componentContent;

Доступные форматы:

• TypeScript (.ts)
• ES Module (.esm)
• CommonJS (.cjs)
• JSON (.json)

Вкладка Intlayer (Панель активности)

Откройте вкладку Intlayer, нажав на значок Intlayer в панели активности VS Code. Она содержит два представления:

• Поиск: Живая строка поиска для быстрого фильтра словарей и их содержимого. При вводе результаты обновляются мгновенно.
• Словари: Древовидное представление ваших окружений/проектов, ключей словарей и файлов, вносящих записи. Вы можете:
  • Кликнуть по файлу, чтобы открыть его в редакторе.
  • Использовать панель инструментов для выполнения действий: Build, Pull, Push, Fill, Refresh, Test и Create Dictionary File.
  • Использовать контекстное меню для действий, специфичных для элемента:
    • Для словаря: Pull или Push
    • Для файла: Fill Dictionary
  • При переключении редакторов дерево покажет соответствующий файл, если он принадлежит словарю.

Установка

Вы можете установить Intlayer напрямую из Marketplace VS Code:

1. Откройте VS Code.
2. Перейдите в Marketplace расширений.
3. Найдите "Intlayer".
4. Нажмите Установить.

Использование

Быстрая навигация

1. Откройте проект, использующий react-intlayer.

2. Найдите вызов useIntlayer(), например:

   tsx

   Копировать код

   Копировать код в буфер обмена

   const content = useIntlayer("app");

3. Выполните Command-click (⌘+Click на macOS) или Ctrl+Click (на Windows/Linux) по ключу (например, "app").
4. VS Code автоматически откроет соответствующий файл словаря, например, src/app.content.ts.

Управление словарями контента

Вкладка Intlayer (Панель активности)

Используйте боковую вкладку для просмотра и управления словарями:

• Откройте значок Intlayer в панели активности.
• В Поиске введите текст для фильтрации словарей и записей в реальном времени.
• В разделе Словари просматривайте окружения, словари и файлы. Используйте панель инструментов для команд Build, Pull, Push, Fill, Refresh, Test и Create Dictionary File. Щелкните правой кнопкой мыши для контекстных действий (Pull/Push для словарей, Fill для файлов). Текущий файл редактора автоматически отображается в дереве, когда это применимо.

Сборка словарей

Сгенерируйте все файлы содержимого словарей с помощью:

Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)

Найдите команду Build Dictionaries и выполните её.

Отправка словарей

Загрузите последнее содержимое словарей:

1. Откройте Палитру команд.
2. Найдите Push Dictionaries.
3. Выберите словари для отправки и подтвердите.

Получение словарей

Синхронизируйте последнее содержимое словарей:

1. Откройте Палитру команд.
2. Найдите Pull Dictionaries.
3. Выберите словари для загрузки.

Заполнение словарей

Заполните словари содержимым из вашего проекта:

1. Откройте Палитру команд.
2. Найдите Fill Dictionaries.
3. Выполните команду для заполнения словарей.

Тестирование словарей

Проверьте словари и найдите отсутствующие переводы:

1. Откройте Палитру команд.
2. Найдите Test Dictionaries.
3. Просмотрите обнаруженные проблемы и исправьте их при необходимости.

История документа