i18n Ally Next

All in one i18n extension for VS Code

English | 简体中文

Features

• 🌍 Inline Annotations — See translations directly in your code
• 🔍 Hover Preview — Preview all translations with hover, edit in one click
• 📦 Extract Hard Strings — Detect and extract hard-coded strings to locale files
• 🤖 Machine Translation — Google, DeepL, Baidu, OpenAI, and Editor built-in LLM (Cursor/Windsurf/VSCode Copilot)
• 🗂 Namespace — Organize translations with t("ns:key") style
• 📝 Review System — Built-in translation review and collaboration
• 🧩 30+ Frameworks — Vue, React, Angular, Svelte, Flutter, and more
• 🎨 Custom Framework — Define your own framework via YAML config
• ⚡ Translate All Missing — One-click translate all missing and stale keys for any locale
• 🕐 Stale Translation Detection — Detect outdated translations when source text changes, re-translate one by one or all at once
• 🔎 Scan & Extract All — Scan entire project for hard-coded strings and batch extract them into i18n keys
• 🧠 Editor LLM Translation — Auto-detect VSCode and use the built-in LLM for translation with batch support

Quick Start

// .vscode/settings.json
{
  "i18n-ally-next.localesPaths": ["src/locales"],
  "i18n-ally-next.sourceLanguage": "en",
  "i18n-ally-next.displayLanguage": "zh-CN"
}

The framework is auto-detected from your package.json. See Supported Frameworks for the full list.

Screenshots

Inline Annotations

Hover and Direct Actions

Extract Translations from Code

Supported Frameworks

Inline Annotation Mode

By default, translations are shown as inline annotations after the key. You can customize this behavior:

// .vscode/settings.json
{
  "i18n-ally-next.annotationInPlace": true,
  "i18n-ally-next.annotationInPlaceFullMatch": true
}

Note: When annotationInPlaceFullMatch is enabled, moving the cursor to the line will restore the original code for editing. The annotationMaxLength limit is automatically disabled in this mode, so translations are shown in full without truncation.

The translated text color in full match mode defaults to #ce9178 (string color in Dark+ theme). You can customize it:

// .vscode/settings.json
{
  "i18n-ally-next.theme.annotationInPlaceFullMatch": "#ce9178" // Dark theme
  // "i18n-ally-next.theme.annotationInPlaceFullMatch": "#a31515" // Light theme
}

Optional Dependencies

Some advanced features require additional packages to be installed in your project:

Note: If you use standalone locale files (e.g. locales/en.json), no extra dependencies are needed. The above packages are only required for SFC inline translation blocks.

Documentation

📖 Full Documentation — Getting started, configuration, namespace, custom framework, and more.

🌍 Multilingual Support

This extension itself supports i18n. It auto-matches your VS Code display language.

Want to help translate? See Contributing.

❤️ Credits

This extension was originally inspired by think2011/vscode-vue-i18n. Vue SFC support is powered by kazupon/vue-i18n-locale-message.

Contributors

📄 License

MIT © 2025-PRESENT Lydanne | MIT © 2021-2024 Lokalise | MIT © 2019-2020 Anthony Fu | MIT © 2018-2019 think2011