Skip to content

vs_code_extension.md

Latest commit

 

History

History
133 lines (93 loc) · 5.89 KB

vs_code_extension.md

File metadata and controls

133 lines (93 loc) · 5.89 KB
createdAt 2025-03-17
updatedAt 2025-09-30
title Official VS Code Extension
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.
keywords
VS Code Extension
Intlayer
Localization
Development Tools
React
Next.js
JavaScript
TypeScript
slugs
doc
vs-code-extension
history
version date changes
7.3.0
2025-11-25
Add extract content command
version date changes
6.1.5
2025-09-30
Add demo gif
version date changes
6.1.0
2025-09-24
Added environment selection section
version date changes
6.0.0
2025-09-22
Intlayer Tab / Fill & Test commands
version date changes
5.5.10
2025-06-29
Init history

Official VS Code Extension

Overview

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

Intlayer VS Code Extension

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

Features

Extract content

  • Extract Content – Extract content from your React / Vue / Svelte components

Fill dictionaries

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

List commands

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

Create content file

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

Test dictionaties

  • Test Dictionaries – Test dictionaries for missing translations.

Rebuild dictionary

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

Intlayer Tab (Activity Bar)

  • 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 recommand to store your AI API keys, as well as 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.<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 live outside the workspace root, set the Base Directory in Settings → Extensions → Intlayer. The loader will look for .env files relative to that directory.