I18n Boost

Supported Frameworks

Works with React, Vue, Svelte, Next.js, i18next, vue-i18n, next-intl and more.

Features

1. Autocomplete for t("...")

Get real-time suggestions for translation keys while typing inside your translation function calls.

How it works:

• Start typing t(" or t(' in a .jsx, .tsx, .vue, or supported file
• i18n-boost will list all available keys from your locale files
• Suggestions filter automatically as you type

2. Easy Switch

When hovering over a translation key in your code, you will see a list of available locales.

How it works:

• Hover over a translation key in your code
• Click on the locale you want to switch to

3. Ctrl+Click to Jump to Locale

Navigate directly from a translation key in your code to its definition in your locale file.

How it works:

• Hold Ctrl (or Cmd on Mac) and click a key in t('...')
• The editor opens your default locale file at the correct line

4. Unused Translation Keys Warnings

Scans your codebase to find translation keys that are defined but never used. Just like the no-unused-vars rule in ESLint, but for i18n keys!

How it works:

• Open your locale file (e.g., en.json).
• Will automatically highlight unused keys.
• In-sync with your code, updating as you edit.

5. Copy Full Translation Key

Effortlessly copy the full nested key path of any translation value in your locale file.

How it works:

• Open your locale file (e.g., en.json)
• Right-click on a value
• Select "Copy Full Translation Key" — done!

⚙️ Configuration

✨ Zero Config (Auto-Discovery)

I18n Boost automatically detects your locale files and structure. If you follow standard conventions (e.g., src/locales, src/i18n, or public/locales), you likely don't need to configure anything.

Settings

• Workspace Settings: .vscode/settings.json (project-specific)
• Settings UI: Ctrl+, → Search for "I18n Boost"
• User Settings: Global settings for all projects

Custom Configuration

📂 File Naming Patterns

Define how your translation files are organized within the localesPath:

• "auto": Automatically detects the pattern based on your files.
• "locale.json": Each locale is a single JSON file.
  • Example: en.json, ar.json, es.json
• **"locale/**/\*.json"**: Each locale is a directory containing multiple JSON files.
  • Example: en/common.json, en/auth/login.json

🔑 Understanding keyStrategy

This setting determines how the extension reads your translation keys. Choose the one that matches your i18n library usage:

• filename (Default): The file name acts as a namespace.

  • Structure: locales/en/auth.json containing key login.
  • Usage: t("auth.login")
  • Best for: Projects that split translations into multiple files (namespaces).

• flat: File paths are ignored; keys are read directly from the JSON structure.

  • Structure: locales/en.json containing nested object auth: { login: ... }.
  • Usage: t("auth.login")
  • Best for: Projects using a single large translation file or libraries that merge all files.

Example Configuration

.vscode/settings.json (workspace-specific):

{
  "i18nBoost.localesPath": "./src/locales",
  "i18nBoost.defaultLocale": "en",
  "i18nBoost.functionNames": [
    "t",
    "translate",
    "$t",
    "i18n.t",
    "t.raw",
    "t.rich"
  ],
  "i18nBoost.fileNamingPattern": "auto",
  "i18nBoost.keyStrategy": "filename",
  "i18nBoost.enabled": true
}

🛠 Installation

From VS Code Marketplace

1. Open Extensions in VS Code (Ctrl+Shift+X)
2. Search for I18n Boost
3. Click Install

From VSIX File

1. Download the latest .vsix file from Releases
2. Open VS Code
3. Go to Extensions → ... → Install from VSIX
4. Select the downloaded .vsix file

From Source (Development)

1. Clone this repository:

   git clone https://github.com/mrgwd/i18n-boost.git
   cd i18n-boost
   

2. Install dependencies:

   npm install
   

3. Compile:

   npm run compile
   

4. Press F5 in VS Code to launch the extension in a new Extension Development Host window.

🔧 Quick Setup

1. Install the extension from the VS Code Marketplace
2. Configure your settings via VS Code Settings (Ctrl+,) or .vscode/settings.json
3. Start using autocomplete and navigation features immediately!

The extension will automatically discover your locale files based on your configuration.

🐛 Troubleshooting

🗂 Project Structure

i18n-boost/
│
├── package.json               # Extension metadata & activation
├── tsconfig.json              # TypeScript configuration
├── README.md                  # This file
├── CHANGELOG.md               # Release notes
├── src/
│   ├── extension.ts           # Entry point
│   ├── commands/              # Command implementations
│   ├── providers/             # Hover, completion, definition providers
│   ├── types/                 # Type definitions
│   ├── utils/                 # Utility functions
│   └── images/                # Icons and images
└── tests/                     # Unit tests

🤝 Contributing

PRs are welcome! Please check the Contributing Guide for details.

🔒 Privacy Policy

I18n Boost respects your privacy:

• No data collection: The extension does not collect, store, or transmit any personal data
• Local processing only: All translation key analysis happens locally in your VS Code instance
• No telemetry: No usage statistics or analytics are collected
• Open source: The entire codebase is open source and auditable

The extension only reads your project files to provide i18n functionality and does not communicate with external servers.

📜 License

This project is licensed under the MIT License — see the LICENSE file for details.

Why I built this extension?

Read the backstory blog post — it's a ~6-min read.

📫 Contact

You can reach out via email or Twitter.