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.

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

Features

Instant Navigation

Go to Definition Support – Use Cmd+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 localized 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 (extension.buildDictionaries) – Generate content files based on your project structure.
• Push Dictionaries (extension.pushDictionaries) – Upload the latest dictionary content to your repository.
• Pull Dictionaries (extension.pullDictionaries) – Sync the latest dictionary content from your repository to your local environment.

Content Declaration Generator

Easily generate structured dictionary files in different formats:

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

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.

Alternatively, install it via the command line:

code --install-extension intlayer

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

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.

Development & Contribution

Want to contribute? We welcome community contributions!

Repo URL: https://github.com/aymericzip/intlayer-vs-code-extension

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/aymericzip/intlayer-vs-code-extension.gitcd intlayer-vs-code-extensionnpm install

Use npm package manager for compatibility with vsce package to build and publish the extension.

Run in Development Mode

1. Open the project in VS Code.
2. Press F5 to launch a new Extension Development Host window.

Submit a Pull Request

If you improve the extension, submit a PR on GitHub.

Feedback & Issues

Found a bug or have a feature request? Open an issue on our GitHub repository:

GitHub Issues

License

Intlayer is released under the MIT License.

Doc History