Official VS Code Extension

Overview

Intlayer is the official Visual Studio Code extension for Intlayer, designed to improve the developer experience when working with localised content in your projects.

Extension link: https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension

Features

• Instant Navigation – Quickly jump to the correct content file when clicking on a useIntlayer key.
• Fill Dictionaries – Populate dictionaries with content from your project.

• Easy access to Intlayer Commands – Build, push, pull, fill, test content dictionaries with ease.

• Content Declaration Generator – Create dictionary content files in various formats (.ts, .esm, .cjs, .json).

• Test Dictionaries – Test dictionaries for missing translations.

• Keep your dictionaries up to date – Keep your dictionaries up to date with the latest content from your project.

• 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).

Usage

Quick Navigation

1. Open a project using react-intlayer.

2. Locate a call to useIntlayer(), such as:

   const content = useIntlayer("app");

3. Command-click (⌘+Click on macOS) or Ctrl+Click (on Windows/Linux) on the key (e.g., "app").
4. VS Code will automatically open the corresponding dictionary file, e.g., src/app.content.ts.

Intlayer Tab (Activity Bar)

Use the side tab to browse and manage dictionaries:

• Open the Intlayer icon in the Activity Bar.
• In Search, type to filter dictionaries and entries in real time.
• 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.

Accessing the commands

You can access the commands from the Command Palette.

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

• Build Dictionaries
• Push Dictionaries
• Pull Dictionaries
• Fill Dictionaries
• Test Dictionaries
• Create Dictionary File

Loading Environment Variables

Intlayer recommends storing your AI API keys, as well as the Intlayer client ID and secret, in environment variables.

The extension can load environment variables from your workspace to run Intlayer commands with the correct context.

• Load order (by priority): .env.<env>.local → .env.<env> → .env.local → .env
• Non-destructive: existing process.env values are not overridden.
• Scope: files are resolved from the configured base directory (defaults to the workspace root).

Selecting the active environment

• 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..local”.
• Settings: go to Settings → Extensions → Intlayer, and set:
  • Environment: the environment name used to resolve .env.<env>* files.
  • (Optional) Env File: an explicit path to a .env file. When provided, it takes precedence over the inferred list.

Monorepos and custom directories

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.

Doc History