Getting Started

Installation

Search for i18n Ally Next in the VS Code Extensions panel, or install from:

• VS Code Marketplace
• Open VSX Registry

Basic Setup

1. Framework Detection

i18n Ally Next automatically detects the i18n framework you are using by reading your package.json dependencies. Supported frameworks include Vue I18n, React I18next, Next-intl, Angular ngx-translate, and many more.

If auto-detection doesn't work, you can manually specify the framework:

// .vscode/settings.json
{
  "i18n-ally-next.enabledFrameworks": ["react-i18next"]
}

2. Configure Locale Paths

The extension will try to auto-detect your locale files. If it fails, set the path manually:

// .vscode/settings.json
{
  "i18n-ally-next.localesPaths": ["src/locales"]
}

3. Set Source Language

// .vscode/settings.json
{
  "i18n-ally-next.sourceLanguage": "en"
}

4. Set Display Language

The display language is the language shown in inline annotations:

// .vscode/settings.json
{
  "i18n-ally-next.displayLanguage": "zh-CN"
}

Directory Structure

i18n Ally Next supports two directory structures:

File Mode

Each locale is a single file:

locales/
├── en.json
├── zh-CN.json
└── ja.json

Directory Mode

Each locale is a directory containing multiple namespace files:

locales/
├── en/
│   ├── common.json
│   └── review.json
├── zh-CN/
│   ├── common.json
│   └── review.json

Set it explicitly if auto-detection doesn't work:

{
  "i18n-ally-next.dirStructure": "dir"
}

Key Style

• nested — Keys are organized hierarchically: { "common": { "ok": "OK" } }, referenced as common.ok
• flat — Keys are flat strings: { "common.ok": "OK" }, referenced as common.ok

{
  "i18n-ally-next.keystyle": "nested"
}

What's Next?

• Namespace Support — Organize translations with t("ns:key")
• Custom Framework — Define your own framework
• Configuration Reference — All available settings