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

Go to Definition Support – Use ⌘ + Click (Mac) or Ctrl + Click (Windows/Linux) on a useIntlayer key to open the corresponding content file instantly.
Seamless Integration – Works effortlessly with react-intlayer and next-intlayer projects.
Multi-language Support – Supports localised content across different languages.
VS Code Integration – Smoothly integrates with VS Code’s navigation and command palette.

Dictionary Management Commands

Manage your content dictionaries directly from VS Code:

• Build Dictionaries – Generate content files based on your project structure.
• Push Dictionaries – Upload the latest dictionary content to your repository.
• Pull Dictionaries – Synchronise the latest dictionary content from your repository to your local environment.
• Fill Dictionaries – Populate dictionaries with content from your project.
• Test Dictionaries – Identify missing or incomplete translations.

Content Declaration Generator

Easily generate structured dictionary files in different formats:

If you are currently working on a component, it will generate the .content.{ts,tsx,js,jsx,mjs,cjs,json} file for you.

Example of component:

const MyComponent = () => {  const { myTranslatedContent } = useIntlayer("my-component");  return <span>{myTranslatedContent}</span>;};

Generated file in TypeScript format:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "my-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },};export default componentContent;

Available formats:

• TypeScript (.ts)
• ES Module (.esm)
• CommonJS (.cjs)
• JSON (.json)

Intlayer Tab (Activity Bar)

Open the Intlayer tab by clicking the Intlayer icon in the VS Code Activity Bar. It contains two views:

• Search: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
• Dictionaries: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
  • Click a file to open it in the editor.
  • Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
  • Use the context menu for item‑specific actions:
    • On a dictionary: Pull or Push
    • On a file: Fill Dictionary
  • When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.

Installation

You can install Intlayer directly from the VS Code Marketplace:

1. Open VS Code.
2. Go to the Extensions Marketplace.
3. Search for "Intlayer".
4. Click Install.

Usage

Quick Navigation

1. Open a project using react-intlayer.

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

   tsx

   Copy code

   Copy the code to the clipboard

   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.

Managing Content Dictionaries

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.

Building Dictionaries

Generate all dictionary content files with:

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

Search for Build Dictionaries and execute the command.

Pushing Dictionaries

Upload the latest dictionary content:

1. Open the Command Palette.
2. Search for Push Dictionaries.
3. Select the dictionaries to push and confirm.

Pulling Dictionaries

Sync the latest dictionary content:

1. Open the Command Palette.
2. Search for Pull Dictionaries.
3. Choose the dictionaries to pull.

Filling Dictionaries

Fill dictionaries with content from your project:

1. Open the Command Palette.
2. Search for Fill Dictionaries.
3. Run the command to populate dictionaries.

Testing Dictionaries

Validate dictionaries and find missing translations:

1. Open the Command Palette.
2. Search for Test Dictionaries.
3. Review the reported issues and fix as needed.

Doc History