@intlayer/docs 7.5.11 → 7.5.13

package/docs/uk/vs_code_extension.md

@@ -0,0 +1,133 @@
+---
+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: 7.3.0
+    date: 2025-11-25
+    changes: Додано команду Extract Content
+  - 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** – Build, push, pull, fill, test словників вмісту з легкістю.
+
+![Створити файл вмісту](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 (Панель активності)** – Оглядайте та шукайте словники у виділеній бічній вкладці з панеллю інструментів і контекстними діями (Build, Pull, Push, Fill, Refresh, Test, Create File).
+
+## Використання
+
+### Швидка навігація
+
+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 на Панелі активності.
+- У **Search** введіть текст, щоб у реальному часі фільтрувати словники та записи.
+- У **Dictionaries** переглядайте середовища, словники та файли. Використовуйте панель інструментів для Build, Pull, Push, Fill, Refresh, Test та Create Dictionary File. Натисніть правою кнопкою для контекстних дій (Pull/Push для словників, Fill для файлів). Поточний файл у редакторі автоматично відображається в дереві, коли це доречно.
+
+### Доступ до команд
+
+Ви можете викликати команди через **Command Palette**.
+
+```sh
+Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
+```
+
+- **Build Dictionaries**
+- **Надіслати словники**
+- **Отримати словники**
+- **Заповнити словники**
+- **Тестувати словники**
+- **Створити файл словника**
+
+### Завантаження змінних оточення
+
+Intlayer рекомендує зберігати ваші AI API keys, а також Intlayer client ID і secret у змінних оточення.
+
+Розширення може завантажувати змінні оточення з вашого робочого простору, щоб виконувати команди Intlayer у правильному контексті.
+
+- **Порядок завантаження (за пріоритетом)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Недеструктивно**: існуючі значення `process.env` не перезаписуються.
+- **Область застосування**: файли визначаються з налаштованого базового каталогу (за замовчуванням — корінь робочого простору).
+
+#### Вибір активного середовища
+
+- **Палітра команд**: відкрийте палітру та виконайте `Intlayer: Select Environment`, потім оберіть середовище (наприклад, `development`, `staging`, `production`). Розширення намагатиметься завантажити перший доступний файл зі списку пріоритетів вище та покаже повідомлення на кшталт «Завантажено env з .env.<env>.local».
+- **Налаштування**: перейдіть у `Settings → Extensions → Intlayer` та встановіть:
+  - **Environment**: назва середовища, яка використовується для визначення файлів `.env.<env>*`.
+  - (Необов'язково) **Env File**: явний шлях до файлу `.env`. Якщо вказано, він має пріоритет над виведеним вище списком.
+
+#### Монорепозиторії та власні каталоги
+
+Якщо ваші файли `.env` розташовані поза коренем робочого простору, встановіть **Базовий каталог** у `Settings → Extensions → Intlayer`. Завантажувач шукатиме файли `.env` відносно цього каталогу.

package/docs/vi/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2025-10-25
+updatedAt: 2026-01-10
 title: Cấu hình
 description: Tìm hiểu cách cấu hình Intlayer cho ứng dụng của bạn. Hiểu các thiết lập và tùy chọn khác nhau để tùy chỉnh Intlayer theo nhu cầu của bạn.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 7.5.1
+    date: 2026-01-10
+    changes: Thêm hỗ trợ cho các định dạng tệp JSON5 và JSONC
   - version: 7.5.0
     date: 2025-12-17
     changes: Thêm tùy chọn `buildMode`
@@ -73,6 +76,8 @@ Intlayer chấp nhận các định dạng tệp cấu hình JSON, JS, MJS và T
 - `intlayer.config.ts`
 - `intlayer.config.js`
 - `intlayer.config.json`
+- `intlayer.config.json5`
+- `intlayer.config.jsonc`
 - `intlayer.config.cjs`
 - `intlayer.config.mjs`
 - `.intlayerrc`

package/docs/vi/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2025-12-13
+updatedAt: 2026-01-10
 title: Tệp Nội Dung
 description: Tìm hiểu cách tùy chỉnh các phần mở rộng cho các tệp khai báo nội dung của bạn. Theo dõi tài liệu này để triển khai các điều kiện một cách hiệu quả trong dự án của bạn.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 7.5.13
+    date: 2026-01-10
+    changes: Thêm hỗ trợ cho các định dạng tệp JSON5 và JSONC
   - version: 7.5.0
     date: 2025-12-13
     changes: Thêm hỗ trợ định dạng ICU và i18next
@@ -795,6 +798,8 @@ Intlayer cho phép bạn tùy chỉnh phần mở rộng cho các tệp khai bá
 Theo mặc định, Intlayer theo dõi tất cả các tệp có phần mở rộng sau để khai báo nội dung:
 
 - `.content.json`
+- `.content.json5`
+- `.content.jsonc`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`

package/docs/vi/intlayer_with_next-i18next.md

@@ -593,7 +593,6 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      format: "i18next",
       source: ({ locale }) => `./locales/${locale}.json`,
     }),
   ],

package/docs/vi/intlayer_with_nextjs_14.md

@@ -105,6 +105,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── middleware.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"

package/docs/vi/intlayer_with_nextjs_15.md

@@ -137,6 +137,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── middleware.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ của ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"

package/docs/vi/intlayer_with_nextjs_16.md

@@ -104,6 +104,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── proxy.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ của ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"