---
createdAt: 2025-03-17
updatedAt: 2025-09-30
title: Официальное расширение VS Code
description: Узнайте, как использовать расширение Intlayer в VS Code для улучшения вашего рабочего процесса разработки. Быстро переходите между локализованным контентом и эффективно управляйте своими словарями.
keywords:
  - Расширение VS Code
  - Intlayer
  - Локализация
  - Инструменты разработки
  - React
  - Next.js
  - JavaScript
  - TypeScript
slugs:
  - doc
  - vs-code-extension
history:
  - version: 6.1.5
    date: 2025-09-30
    changes: "Добавлено демонстрационное gif"
  - version: 6.1.0
    date: 2025-09-24
    changes: "Добавлен раздел выбора окружения"
  - version: 6.0.0
    date: 2025-09-22
    changes: "Вкладка Intlayer / команды Fill & Test"
  - version: 5.5.10
    date: 2025-06-29
    changes: "Инициализация истории"
---

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

## Обзор

[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension), официальное расширение Visual Studio Code для **Intlayer**, разработанное для улучшения опыта разработчика при работе с локализованным контентом в ваших проектах.

![Расширение Intlayer для VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)

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

## Возможности

![Извлечение контента](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)

- **Извлечение контента** – Извлекайте контент из ваших компонентов React / Vue / Svelte

![Заполнение словарей](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)

- **Мгновенная навигация** – Быстрый переход к нужному файлу контента при клике на ключ `useIntlayer`.
- **Заполнение словарей** – Заполнение словарей контентом из вашего проекта.

![Список команд](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)

- **Простой доступ к командам Intlayer** – Легко собирайте, отправляйте, загружайте, заполняйте и тестируйте словари контента.

![Создание файла контента](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)

- **Генератор деклараций контента** – Создавайте файлы словарей контента в различных форматах (`.ts`, `.esm`, `.cjs`, `.json`).

![Тестирование словарей](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)

- **Тестирование словарей** – Проверяйте словари на наличие отсутствующих переводов.

![Пересобрать словарь](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)

- **Держите ваши словари в актуальном состоянии** – Обновляйте словари с последним содержимым из вашего проекта.

![Вкладка Intlayer (Панель активности)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)

- **Вкладка Intlayer (Панель активности)** – Просматривайте и ищите словари через специальную боковую вкладку с панелью инструментов и контекстными действиями (Сборка, Загрузка, Отправка, Заполнение, Обновление, Тестирование, Создание файла).

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

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

1. Откройте проект, использующий **react-intlayer**.
2. Найдите вызов `useIntlayer()`, например:

   ```tsx
   const content = useIntlayer("app");
   ```

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

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

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

- Откройте иконку Intlayer на панели активности.
- В поле **Поиск** введите текст для фильтрации словарей и записей в реальном времени.
- В разделе **Словари** просматривайте окружения, словари и файлы. Используйте панель инструментов для действий: Сборка, Загрузка, Отправка, Заполнение, Обновление, Тестирование и Создание файла словаря. Щелкните правой кнопкой мыши для контекстных действий (Загрузка/Отправка для словарей, Заполнение для файлов). Текущий файл редактора автоматически подсвечивается в дереве, если применимо.

### Доступ к командам

Вы можете получить доступ к командам через **Палитру команд**.

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

- **Сборка словарей**
- **Отправка словарей**
- **Загрузка словарей**
- **Заполнение словарей**
- **Тестирование словарей**
- **Создание файла словаря**

### Загрузка переменных окружения

Intlayer рекомендует хранить ваши ключи API ИИ, а также идентификатор клиента Intlayer и секрет в переменных окружения.

Расширение может загружать переменные окружения из вашего рабочего пространства для выполнения команд Intlayer с правильным контекстом.

- **Порядок загрузки (по приоритету)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
- **Без разрушения**: существующие значения `process.env` не перезаписываются.
- **Область действия**: файлы разрешаются из настроенной базовой директории (по умолчанию корень рабочего пространства).

#### Выбор активного окружения

- **Палитра команд**: откройте палитру и выполните команду `Intlayer: Select Environment`, затем выберите окружение (например, `development`, `staging`, `production`). Расширение попытается загрузить первый доступный файл из приведённого выше списка приоритетов и покажет уведомление, например «Загружено окружение из `.env.<env>.local`».
- **Настройки**: перейдите в `Настройки → Расширения → Intlayer` и установите:
  - **Окружение**: имя окружения, используемое для разрешения файлов `.env.<env>*`.
  - (Опционально) **Файл Env**: явный путь к файлу `.env`. При указании он имеет приоритет над списком, определённым автоматически.

#### Моно-репозитории и пользовательские директории

Если ваши файлы `.env` находятся за пределами корня рабочего пространства, установите **Базовый каталог** в `Настройки → Расширения → Intlayer`. Загрузчик будет искать файлы `.env` относительно этого каталога.