@intlayer/docs 6.1.4 → 6.1.6-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1366 -75
- package/blog/ar/nextjs-multilingual-seo-comparison.md +364 -0
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1288 -72
- package/blog/de/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/en/intlayer_with_next-i18next.mdx +431 -0
- package/blog/en/intlayer_with_next-intl.mdx +335 -0
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +583 -336
- package/blog/en/nextjs-multilingual-seo-comparison.md +360 -0
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1144 -37
- package/blog/en-GB/nextjs-multilingual-seo-comparison.md +360 -0
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1236 -64
- package/blog/es/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1142 -75
- package/blog/fr/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/hi/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1130 -55
- package/blog/it/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1150 -76
- package/blog/ja/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1139 -73
- package/blog/ko/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1143 -76
- package/blog/pt/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1150 -74
- package/blog/ru/nextjs-multilingual-seo-comparison.md +370 -0
- package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
- package/blog/tr/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1152 -75
- package/blog/zh/nextjs-multilingual-seo-comparison.md +394 -0
- package/dist/cjs/generated/blog.entry.cjs +16 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +16 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +16 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +16 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/component_i18n.md +186 -0
- package/docs/ar/vs_code_extension.md +48 -109
- package/docs/de/component_i18n.md +186 -0
- package/docs/de/vs_code_extension.md +46 -107
- package/docs/en/component_i18n.md +186 -0
- package/docs/en/interest_of_intlayer.md +2 -2
- package/docs/en/intlayer_with_nextjs_14.md +18 -1
- package/docs/en/intlayer_with_nextjs_15.md +18 -1
- package/docs/en/vs_code_extension.md +24 -114
- package/docs/en-GB/component_i18n.md +186 -0
- package/docs/en-GB/vs_code_extension.md +42 -103
- package/docs/es/component_i18n.md +182 -0
- package/docs/es/vs_code_extension.md +53 -114
- package/docs/fr/component_i18n.md +186 -0
- package/docs/fr/vs_code_extension.md +50 -111
- package/docs/hi/component_i18n.md +186 -0
- package/docs/hi/vs_code_extension.md +49 -110
- package/docs/it/component_i18n.md +186 -0
- package/docs/it/vs_code_extension.md +50 -111
- package/docs/ja/component_i18n.md +186 -0
- package/docs/ja/vs_code_extension.md +50 -111
- package/docs/ko/component_i18n.md +186 -0
- package/docs/ko/vs_code_extension.md +48 -109
- package/docs/pt/component_i18n.md +186 -0
- package/docs/pt/vs_code_extension.md +46 -107
- package/docs/ru/component_i18n.md +186 -0
- package/docs/ru/vs_code_extension.md +48 -109
- package/docs/tr/component_i18n.md +186 -0
- package/docs/tr/vs_code_extension.md +54 -115
- package/docs/zh/component_i18n.md +186 -0
- package/docs/zh/vs_code_extension.md +51 -105
- package/package.json +11 -11
- package/src/generated/blog.entry.ts +16 -0
- package/src/generated/docs.entry.ts +16 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-03-17
|
|
3
|
-
updatedAt: 2025-09-
|
|
3
|
+
updatedAt: 2025-09-30
|
|
4
4
|
title: Official VS Code Extension
|
|
5
5
|
description: Learn how to use the Intlayer extension in VS Code to enhance your development workflow. Quickly navigate between localized content and manage your dictionaries efficiently.
|
|
6
6
|
keywords:
|
|
@@ -23,92 +23,36 @@ slugs:
|
|
|
23
23
|
|
|
24
24
|
[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) is the official Visual Studio Code extension for **Intlayer**, designed to improve the developer experience when working with localized content in your projects.
|
|
25
25
|
|
|
26
|
-

|
|
26
|
+

|
|
27
27
|
|
|
28
28
|
Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
|
|
29
29
|
|
|
30
30
|
## Features
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+

|
|
33
33
|
|
|
34
|
-
**
|
|
35
|
-
**
|
|
36
|
-
**Multi-language Support** – Supports localized content across different languages.
|
|
37
|
-
**VS Code Integration** – Smoothly integrates with VS Code’s navigation and command palette.
|
|
34
|
+
- **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.
|
|
35
|
+
- **Fill Dictionaries** – Fill dictionaries with content from your project.
|
|
38
36
|
|
|
39
|
-
|
|
37
|
+

|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
- **Easy access to Intlayer Commands** – Build, push, pull, fill, test content dictionaries with ease.
|
|
42
40
|
|
|
43
|
-
|
|
44
|
-
- **Push Dictionaries** – Upload the latest dictionary content to your repository.
|
|
45
|
-
- **Pull Dictionaries** – Sync the latest dictionary content from your repository to your local environment.
|
|
46
|
-
- **Fill Dictionaries** – Populate dictionaries with content from your project.
|
|
47
|
-
- **Test Dictionaries** – Identify missing or incomplete translations.
|
|
41
|
+

|
|
48
42
|
|
|
49
|
-
|
|
43
|
+
- **Content Declaration Generator** – Create dictionary content files in various formats (`.ts`, `.esm`, `.cjs`, `.json`).
|
|
50
44
|
|
|
51
|
-
|
|
45
|
+

|
|
52
46
|
|
|
53
|
-
|
|
47
|
+
- **Test Dictionaries** – Test dictionaries for missing translations.
|
|
54
48
|
|
|
55
|
-
|
|
49
|
+

|
|
56
50
|
|
|
57
|
-
|
|
58
|
-
const MyComponent = () => {
|
|
59
|
-
const { myTranslatedContent } = useIntlayer("my-component");
|
|
51
|
+
- **Keep your dictionaries up to date** – Keep your dictionaries up to date with the latest content from your project.
|
|
60
52
|
|
|
61
|
-
|
|
62
|
-
};
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
Generated file in TypeScript format:
|
|
66
|
-
|
|
67
|
-
```tsx fileName="src/components/MyComponent/index.content.ts"
|
|
68
|
-
import { t, type Dictionary } from "intlayer";
|
|
69
|
-
|
|
70
|
-
const componentContent = {
|
|
71
|
-
key: "my-component",
|
|
72
|
-
content: {
|
|
73
|
-
myTranslatedContent: t({
|
|
74
|
-
en: "Hello World",
|
|
75
|
-
es: "Hola Mundo",
|
|
76
|
-
fr: "Bonjour le monde",
|
|
77
|
-
}),
|
|
78
|
-
},
|
|
79
|
-
};
|
|
53
|
+

|
|
80
54
|
|
|
81
|
-
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Available formats:
|
|
85
|
-
|
|
86
|
-
- **TypeScript (`.ts`)**
|
|
87
|
-
- **ES Module (`.esm`)**
|
|
88
|
-
- **CommonJS (`.cjs`)**
|
|
89
|
-
- **JSON (`.json`)**
|
|
90
|
-
|
|
91
|
-
### Intlayer Tab (Activity Bar)
|
|
92
|
-
|
|
93
|
-
Open the Intlayer tab by clicking the Intlayer icon in the VS Code Activity Bar. It contains two views:
|
|
94
|
-
|
|
95
|
-
- **Search**: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
|
|
96
|
-
- **Dictionaries**: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
|
|
97
|
-
- Click a file to open it in the editor.
|
|
98
|
-
- Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
|
|
99
|
-
- Use the context menu for item‑specific actions:
|
|
100
|
-
- On a dictionary: Pull or Push
|
|
101
|
-
- On a file: Fill Dictionary
|
|
102
|
-
- When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.
|
|
103
|
-
|
|
104
|
-
## Installation
|
|
105
|
-
|
|
106
|
-
You can install **Intlayer** directly from the VS Code Marketplace:
|
|
107
|
-
|
|
108
|
-
1. Open **VS Code**.
|
|
109
|
-
2. Go to the **Extensions Marketplace**.
|
|
110
|
-
3. Search for **"Intlayer"**.
|
|
111
|
-
4. Click **Install**.
|
|
55
|
+
- **Intlayer Tab (Activity Bar)** – Browse and search dictionaries from a dedicated side tab with toolbar and context actions (Build, Pull, Push, Fill, Refresh, Test, Create File).
|
|
112
56
|
|
|
113
57
|
## Usage
|
|
114
58
|
|
|
@@ -124,8 +68,6 @@ You can install **Intlayer** directly from the VS Code Marketplace:
|
|
|
124
68
|
3. **Command-click** (`⌘+Click` on macOS) or **Ctrl+Click** (on Windows/Linux) on the key (e.g., `"app"`).
|
|
125
69
|
4. VS Code will automatically open the corresponding dictionary file, e.g., `src/app.content.ts`.
|
|
126
70
|
|
|
127
|
-
### Managing Content Dictionaries
|
|
128
|
-
|
|
129
71
|
### Intlayer Tab (Activity Bar)
|
|
130
72
|
|
|
131
73
|
Use the side tab to browse and manage dictionaries:
|
|
@@ -134,47 +76,20 @@ Use the side tab to browse and manage dictionaries:
|
|
|
134
76
|
- In **Search**, type to filter dictionaries and entries in real time.
|
|
135
77
|
- In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right‑click for context actions (Pull/Push on dictionaries, Fill on files). The current editor file auto‑reveals in the tree when applicable.
|
|
136
78
|
|
|
137
|
-
|
|
79
|
+
### Accessing the commands
|
|
138
80
|
|
|
139
|
-
|
|
81
|
+
You can access the commands from the **Command Palette**.
|
|
140
82
|
|
|
141
83
|
```sh
|
|
142
84
|
Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
|
|
143
85
|
```
|
|
144
86
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
1. Open the **Command Palette**.
|
|
152
|
-
2. Search for **Push Dictionaries**.
|
|
153
|
-
3. Select the dictionaries to push and confirm.
|
|
154
|
-
|
|
155
|
-
#### Pulling Dictionaries
|
|
156
|
-
|
|
157
|
-
Sync the latest dictionary content:
|
|
158
|
-
|
|
159
|
-
1. Open the **Command Palette**.
|
|
160
|
-
2. Search for **Pull Dictionaries**.
|
|
161
|
-
3. Choose the dictionaries to pull.
|
|
162
|
-
|
|
163
|
-
#### Filling Dictionaries
|
|
164
|
-
|
|
165
|
-
Fill dictionaries with content from your project:
|
|
166
|
-
|
|
167
|
-
1. Open the **Command Palette**.
|
|
168
|
-
2. Search for **Fill Dictionaries**.
|
|
169
|
-
3. Run the command to populate dictionaries.
|
|
170
|
-
|
|
171
|
-
#### Testing Dictionaries
|
|
172
|
-
|
|
173
|
-
Validate dictionaries and find missing translations:
|
|
174
|
-
|
|
175
|
-
1. Open the **Command Palette**.
|
|
176
|
-
2. Search for **Test Dictionaries**.
|
|
177
|
-
3. Review the reported issues and fix as needed.
|
|
87
|
+
- **Build Dictionaries**
|
|
88
|
+
- **Push Dictionaries**
|
|
89
|
+
- **Pull Dictionaries**
|
|
90
|
+
- **Fill Dictionaries**
|
|
91
|
+
- **Test Dictionaries**
|
|
92
|
+
- **Create Dictionary File**
|
|
178
93
|
|
|
179
94
|
### Loading Environment Variables
|
|
180
95
|
|
|
@@ -197,16 +112,11 @@ The extension can load environment variables from your workspace to run Intlayer
|
|
|
197
112
|
|
|
198
113
|
If your `.env` files live outside the workspace root, set the **Base Directory** in `Settings → Extensions → Intlayer`. The loader will look for `.env` files relative to that directory.
|
|
199
114
|
|
|
200
|
-
#### Notes
|
|
201
|
-
|
|
202
|
-
- The extension loads the first matching file and keeps any existing variables intact.
|
|
203
|
-
- You’ll see an info message each time a file is successfully loaded.
|
|
204
|
-
- If no candidate file is found, commands still run with your current environment variables.
|
|
205
|
-
|
|
206
115
|
## Doc History
|
|
207
116
|
|
|
208
117
|
| Version | Date | Changes |
|
|
209
118
|
| ------- | ---------- | ----------------------------------- |
|
|
119
|
+
| 6.1.5 | 2025-09-30 | Add demo gif |
|
|
210
120
|
| 6.1.0 | 2025-09-24 | Added environment selection section |
|
|
211
121
|
| 6.0.0 | 2025-09-22 | Intlayer Tab / Fill & Test commands |
|
|
212
122
|
| 5.5.10 | 2025-06-29 | Init history |
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-03-07
|
|
3
|
+
updatedAt: 2025-09-30
|
|
4
|
+
title: Make a component multilingual (i18n library) in React and Next.js
|
|
5
|
+
description: Learn how to declare and retrieve localised content to build a multilingual React or Next.js component with Intlayer.
|
|
6
|
+
keywords:
|
|
7
|
+
- i18n
|
|
8
|
+
- component
|
|
9
|
+
- react
|
|
10
|
+
- multilingual
|
|
11
|
+
- next.js
|
|
12
|
+
- intlayer
|
|
13
|
+
slugs:
|
|
14
|
+
- doc
|
|
15
|
+
- component
|
|
16
|
+
- i18n
|
|
17
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
|
|
18
|
+
youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# How to make a component multilingual (i18n) with Intlayer
|
|
22
|
+
|
|
23
|
+
This guide shows the minimal steps to make a UI component multilingual in two common setups:
|
|
24
|
+
|
|
25
|
+
- React (Vite/SPA)
|
|
26
|
+
- Next.js (App Router)
|
|
27
|
+
|
|
28
|
+
You will first declare your content, then retrieve it in your component.
|
|
29
|
+
|
|
30
|
+
## 1) Declare your content (shared for React and Next.js)
|
|
31
|
+
|
|
32
|
+
Create a content declaration file near your component. This keeps translations close to where they are used and enables type safety.
|
|
33
|
+
|
|
34
|
+
```ts fileName="component.content.ts"
|
|
35
|
+
import { t, type Dictionary } from "intlayer";
|
|
36
|
+
|
|
37
|
+
const componentContent = {
|
|
38
|
+
key: "component-example",
|
|
39
|
+
content: {
|
|
40
|
+
title: t({
|
|
41
|
+
en: "Hello",
|
|
42
|
+
fr: "Bonjour",
|
|
43
|
+
es: "Hola",
|
|
44
|
+
}),
|
|
45
|
+
description: t({
|
|
46
|
+
en: "A multilingual React component",
|
|
47
|
+
fr: "Un composant React multilingue",
|
|
48
|
+
es: "Un componente React multilingüe",
|
|
49
|
+
}),
|
|
50
|
+
},
|
|
51
|
+
} satisfies Dictionary;
|
|
52
|
+
|
|
53
|
+
export default componentContent;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
JSON is also supported if you prefer configuration files.
|
|
57
|
+
|
|
58
|
+
```json fileName="component.content.json"
|
|
59
|
+
{
|
|
60
|
+
"$schema": "https://intlayer.org/schema.json",
|
|
61
|
+
"key": "component-example",
|
|
62
|
+
"content": {
|
|
63
|
+
"title": {
|
|
64
|
+
"nodeType": "translation",
|
|
65
|
+
"translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
|
|
66
|
+
},
|
|
67
|
+
"description": {
|
|
68
|
+
"nodeType": "translation",
|
|
69
|
+
"translation": {
|
|
70
|
+
"en": "A multilingual React component",
|
|
71
|
+
"fr": "Un composant React multilingue",
|
|
72
|
+
"es": "Un componente React multilingüe"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 2) Retrieve your content
|
|
80
|
+
|
|
81
|
+
### Case A — React app (Vite/SPA)
|
|
82
|
+
|
|
83
|
+
Default approach: use `useIntlayer` to retrieve by key. This keeps components lean and typed.
|
|
84
|
+
|
|
85
|
+
```tsx fileName="ComponentExample.tsx"
|
|
86
|
+
import { useIntlayer } from "react-intlayer";
|
|
87
|
+
|
|
88
|
+
export function ComponentExample() {
|
|
89
|
+
const content = useIntlayer("component-example");
|
|
90
|
+
return (
|
|
91
|
+
<div>
|
|
92
|
+
<h1>{content.title}</h1>
|
|
93
|
+
<p>{content.description}</p>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Server-side rendering or outside provider: use `react-intlayer/server` and pass an explicit `locale` when required.
|
|
100
|
+
|
|
101
|
+
```tsx fileName="ServerRenderedExample.tsx"
|
|
102
|
+
import { useIntlayer } from "react-intlayer/server";
|
|
103
|
+
|
|
104
|
+
export function ServerRenderedExample({ locale }: { locale: string }) {
|
|
105
|
+
const content = useIntlayer("component-example", locale);
|
|
106
|
+
return (
|
|
107
|
+
<>
|
|
108
|
+
<h1>{content.title}</h1>
|
|
109
|
+
<p>{content.description}</p>
|
|
110
|
+
</>
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Alternative: `useDictionary` can read an entire declared object if you prefer collocating structure at the call site.
|
|
116
|
+
|
|
117
|
+
```tsx fileName="ComponentWithDictionary.tsx"
|
|
118
|
+
import { useDictionary } from "react-intlayer";
|
|
119
|
+
import componentContent from "./component.content";
|
|
120
|
+
|
|
121
|
+
export function ComponentWithDictionary() {
|
|
122
|
+
const { title, description } = useDictionary(componentContent);
|
|
123
|
+
return (
|
|
124
|
+
<div>
|
|
125
|
+
<h1>{title}</h1>
|
|
126
|
+
<p>{description}</p>
|
|
127
|
+
</div>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Case B — Next.js (App Router)
|
|
133
|
+
|
|
134
|
+
Prefer server components for data safety and performance. Use `useIntlayer` from `next-intlayer/server` in server files, and `useIntlayer` from `next-intlayer` in client components.
|
|
135
|
+
|
|
136
|
+
```tsx fileName="app/[locale]/example/ServerComponent.tsx"
|
|
137
|
+
import { useIntlayer } from "next-intlayer/server";
|
|
138
|
+
|
|
139
|
+
export default function ServerComponent() {
|
|
140
|
+
const content = useIntlayer("component-example");
|
|
141
|
+
return (
|
|
142
|
+
<>
|
|
143
|
+
<h1>{content.title}</h1>
|
|
144
|
+
<p>{content.description}</p>
|
|
145
|
+
</>
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```tsx fileName="app/[locale]/example/ClientComponent.tsx"
|
|
151
|
+
"use client";
|
|
152
|
+
|
|
153
|
+
import { useIntlayer } from "next-intlayer";
|
|
154
|
+
|
|
155
|
+
export function ClientComponent() {
|
|
156
|
+
const content = useIntlayer("component-example");
|
|
157
|
+
return (
|
|
158
|
+
<div>
|
|
159
|
+
<h1>{content.title}</h1>
|
|
160
|
+
<p>{content.description}</p>
|
|
161
|
+
</div>
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Tip: For page metadata and SEO, you can also fetch content using `getIntlayer` and generate multilingual URLs via `getMultilingualUrls`.
|
|
167
|
+
|
|
168
|
+
## Why Intlayer’s component approach is best
|
|
169
|
+
|
|
170
|
+
- **Collocation**: Content declarations live near components, reducing drift and improving reuse across design systems.
|
|
171
|
+
- **Type safety**: Keys and structures are strongly typed; missing translations surface at build-time rather than at runtime.
|
|
172
|
+
- **Server-first**: Works natively in server components for better security and performance; client hooks remain ergonomic.
|
|
173
|
+
- **Tree-shaking**: Only content used by the component is bundled, keeping payloads small in large applications.
|
|
174
|
+
- **DX & tooling**: Built-in middleware, SEO helpers, and optional Visual Editor/AI translations streamline everyday work.
|
|
175
|
+
|
|
176
|
+
See the comparisons and patterns in the Next.js-focused roundup: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
|
|
177
|
+
|
|
178
|
+
## Related guides and references
|
|
179
|
+
|
|
180
|
+
- React setup (Vite): https://intlayer.org/doc/environment/vite-and-react
|
|
181
|
+
- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
|
|
182
|
+
- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
|
|
183
|
+
- Next.js setup: https://intlayer.org/doc/environment/nextjs
|
|
184
|
+
- Why Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
|
|
185
|
+
|
|
186
|
+
These pages include end-to-end setup, providers, routing, and SEO helpers.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-03-17
|
|
3
|
-
updatedAt: 2025-09-
|
|
3
|
+
updatedAt: 2025-09-30
|
|
4
4
|
title: Official VS Code Extension
|
|
5
5
|
description: Learn how to use the Intlayer extension in VS Code to enhance your development workflow. Quickly navigate between localised content and manage your dictionaries efficiently.
|
|
6
6
|
keywords:
|
|
@@ -23,92 +23,36 @@ slugs:
|
|
|
23
23
|
|
|
24
24
|
[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) is the official Visual Studio Code extension for **Intlayer**, designed to improve the developer experience when working with localised content in your projects.
|
|
25
25
|
|
|
26
|
-

|
|
26
|
+

|
|
27
27
|
|
|
28
28
|
Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
|
|
29
29
|
|
|
30
30
|
## Features
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+

|
|
33
33
|
|
|
34
|
-
**
|
|
35
|
-
**Seamless Integration** – Works effortlessly with **react-intlayer** and **next-intlayer** projects.
|
|
36
|
-
**Multi-language Support** – Supports localised content across different languages.
|
|
37
|
-
**VS Code Integration** – Smoothly integrates with VS Code’s navigation and command palette.
|
|
38
|
-
|
|
39
|
-
### Dictionary Management Commands
|
|
40
|
-
|
|
41
|
-
Manage your content dictionaries directly from VS Code:
|
|
42
|
-
|
|
43
|
-
- **Build Dictionaries** – Generate content files based on your project structure.
|
|
44
|
-
- **Push Dictionaries** – Upload the latest dictionary content to your repository.
|
|
45
|
-
- **Pull Dictionaries** – Synchronise the latest dictionary content from your repository to your local environment.
|
|
34
|
+
- **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.
|
|
46
35
|
- **Fill Dictionaries** – Populate dictionaries with content from your project.
|
|
47
|
-
- **Test Dictionaries** – Identify missing or incomplete translations.
|
|
48
|
-
|
|
49
|
-
### Content Declaration Generator
|
|
50
|
-
|
|
51
|
-
Easily generate structured dictionary files in different formats:
|
|
52
36
|
|
|
53
|
-
|
|
37
|
+

|
|
54
38
|
|
|
55
|
-
|
|
39
|
+
- **Easy access to Intlayer Commands** – Build, push, pull, fill, test content dictionaries with ease.
|
|
56
40
|
|
|
57
|
-
|
|
58
|
-
const MyComponent = () => {
|
|
59
|
-
const { myTranslatedContent } = useIntlayer("my-component");
|
|
41
|
+

|
|
60
42
|
|
|
61
|
-
|
|
62
|
-
};
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
Generated file in TypeScript format:
|
|
43
|
+
- **Content Declaration Generator** – Create dictionary content files in various formats (`.ts`, `.esm`, `.cjs`, `.json`).
|
|
66
44
|
|
|
67
|
-
|
|
68
|
-
import { t, type Dictionary } from "intlayer";
|
|
45
|
+

|
|
69
46
|
|
|
70
|
-
|
|
71
|
-
key: "my-component",
|
|
72
|
-
content: {
|
|
73
|
-
myTranslatedContent: t({
|
|
74
|
-
en: "Hello World",
|
|
75
|
-
es: "Hola Mundo",
|
|
76
|
-
fr: "Bonjour le monde",
|
|
77
|
-
}),
|
|
78
|
-
},
|
|
79
|
-
};
|
|
47
|
+
- **Test Dictionaries** – Test dictionaries for missing translations.
|
|
80
48
|
|
|
81
|
-
|
|
82
|
-
```
|
|
49
|
+

|
|
83
50
|
|
|
84
|
-
|
|
51
|
+
- **Keep your dictionaries up to date** – Keep your dictionaries up to date with the latest content from your project.
|
|
85
52
|
|
|
86
|
-
|
|
87
|
-
- **ES Module (`.esm`)**
|
|
88
|
-
- **CommonJS (`.cjs`)**
|
|
89
|
-
- **JSON (`.json`)**
|
|
90
|
-
|
|
91
|
-
### Intlayer Tab (Activity Bar)
|
|
53
|
+

|
|
92
54
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
- **Search**: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
|
|
96
|
-
- **Dictionaries**: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
|
|
97
|
-
- Click a file to open it in the editor.
|
|
98
|
-
- Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
|
|
99
|
-
- Use the context menu for item‑specific actions:
|
|
100
|
-
- On a dictionary: Pull or Push
|
|
101
|
-
- On a file: Fill Dictionary
|
|
102
|
-
- When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.
|
|
103
|
-
|
|
104
|
-
## Installation
|
|
105
|
-
|
|
106
|
-
You can install **Intlayer** directly from the VS Code Marketplace:
|
|
107
|
-
|
|
108
|
-
1. Open **VS Code**.
|
|
109
|
-
2. Go to the **Extensions Marketplace**.
|
|
110
|
-
3. Search for **"Intlayer"**.
|
|
111
|
-
4. Click **Install**.
|
|
55
|
+
- **Intlayer Tab (Activity Bar)** – Browse and search dictionaries from a dedicated side tab with toolbar and context actions (Build, Pull, Push, Fill, Refresh, Test, Create File).
|
|
112
56
|
|
|
113
57
|
## Usage
|
|
114
58
|
|
|
@@ -124,60 +68,55 @@ You can install **Intlayer** directly from the VS Code Marketplace:
|
|
|
124
68
|
3. **Command-click** (`⌘+Click` on macOS) or **Ctrl+Click** (on Windows/Linux) on the key (e.g., `"app"`).
|
|
125
69
|
4. VS Code will automatically open the corresponding dictionary file, e.g., `src/app.content.ts`.
|
|
126
70
|
|
|
127
|
-
### Managing Content Dictionaries
|
|
128
|
-
|
|
129
71
|
### Intlayer Tab (Activity Bar)
|
|
130
72
|
|
|
131
73
|
Use the side tab to browse and manage dictionaries:
|
|
132
74
|
|
|
133
75
|
- Open the Intlayer icon in the Activity Bar.
|
|
134
76
|
- In **Search**, type to filter dictionaries and entries in real time.
|
|
135
|
-
- In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right
|
|
77
|
+
- In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right-click for context actions (Pull/Push on dictionaries, Fill on files). The current editor file auto-reveals in the tree when applicable.
|
|
136
78
|
|
|
137
|
-
|
|
79
|
+
### Accessing the commands
|
|
138
80
|
|
|
139
|
-
|
|
81
|
+
You can access the commands from the **Command Palette**.
|
|
140
82
|
|
|
141
83
|
```sh
|
|
142
84
|
Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
|
|
143
85
|
```
|
|
144
86
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
1. Open the **Command Palette**.
|
|
152
|
-
2. Search for **Push Dictionaries**.
|
|
153
|
-
3. Select the dictionaries to push and confirm.
|
|
154
|
-
|
|
155
|
-
#### Pulling Dictionaries
|
|
87
|
+
- **Build Dictionaries**
|
|
88
|
+
- **Push Dictionaries**
|
|
89
|
+
- **Pull Dictionaries**
|
|
90
|
+
- **Fill Dictionaries**
|
|
91
|
+
- **Test Dictionaries**
|
|
92
|
+
- **Create Dictionary File**
|
|
156
93
|
|
|
157
|
-
|
|
94
|
+
### Loading Environment Variables
|
|
158
95
|
|
|
159
|
-
|
|
160
|
-
2. Search for **Pull Dictionaries**.
|
|
161
|
-
3. Choose the dictionaries to pull.
|
|
96
|
+
Intlayer recommends storing your AI API keys, as well as the Intlayer client ID and secret, in environment variables.
|
|
162
97
|
|
|
163
|
-
|
|
98
|
+
The extension can load environment variables from your workspace to run Intlayer commands with the correct context.
|
|
164
99
|
|
|
165
|
-
|
|
100
|
+
- **Load order (by priority)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
|
|
101
|
+
- **Non-destructive**: existing `process.env` values are not overridden.
|
|
102
|
+
- **Scope**: files are resolved from the configured base directory (defaults to the workspace root).
|
|
166
103
|
|
|
167
|
-
|
|
168
|
-
2. Search for **Fill Dictionaries**.
|
|
169
|
-
3. Run the command to populate dictionaries.
|
|
104
|
+
#### Selecting the active environment
|
|
170
105
|
|
|
171
|
-
|
|
106
|
+
- **Command Palette**: open the palette and run `Intlayer: Select Environment`, then choose the environment (e.g., `development`, `staging`, `production`). The extension will attempt to load the first available file in the priority list above and show a notification like “Loaded env from .env.<env>.local”.
|
|
107
|
+
- **Settings**: go to `Settings → Extensions → Intlayer`, and set:
|
|
108
|
+
- **Environment**: the environment name used to resolve `.env.<env>*` files.
|
|
109
|
+
- (Optional) **Env File**: an explicit path to a `.env` file. When provided, it takes precedence over the inferred list.
|
|
172
110
|
|
|
173
|
-
|
|
111
|
+
#### Monorepos and custom directories
|
|
174
112
|
|
|
175
|
-
|
|
176
|
-
2. Search for **Test Dictionaries**.
|
|
177
|
-
3. Review the reported issues and fix as needed.
|
|
113
|
+
If your `.env` files reside outside the workspace root, set the **Base Directory** in `Settings → Extensions → Intlayer`. The loader will search for `.env` files relative to that directory.
|
|
178
114
|
|
|
179
115
|
## Doc History
|
|
180
116
|
|
|
181
|
-
| Version | Date | Changes
|
|
182
|
-
| ------- | ---------- |
|
|
183
|
-
|
|
|
117
|
+
| Version | Date | Changes |
|
|
118
|
+
| ------- | ---------- | ----------------------------------- |
|
|
119
|
+
| 6.1.5 | 2025-09-30 | Added demo gif |
|
|
120
|
+
| 6.1.0 | 2025-09-24 | Added environment selection section |
|
|
121
|
+
| 6.0.0 | 2025-09-22 | Intlayer Tab / Fill & Test commands |
|
|
122
|
+
| 5.5.10 | 2025-06-29 | Initial history |
|