Loccy — modern i18n helper for React & Vue apps

Every keypath in your code shows its real translation inline. Hover it to read all locales, edit any of them in place, jump to every usage, rename globally. No more digging through JSON files.

Works with react-i18next, next-intl and vue-i18n, in all VS Code based editors.

Docs → loccy.dev/docs/extension

Note: the legacy loccy.config.json is replaced by loccy.yaml. If you already have a JSON config, run Loccy: Migrate loccy.config.json to loccy.yaml from the Command Palette to convert it.

Setup

Loccy auto-detects the i18n setup of any open project. Zero-config, covers most projects.

Still, add a loccy.yaml (run Loccy: Create Config File from the Command Palette). It's where you tune or override detection, and the only place to define the AI styleguide: rules like "de: use informal 'du' instead of 'Sie'", set once and applied to every AI translation.

Showcase: core features

💡 Prefer video over GIFs? Same walkthrough in the docs: loccy.dev/docs/extension/core-features

1 • Edit in place

Click the pencil button next to a translation in the hover menu to edit it directly. The change is written back to the JSON file without leaving your component. To edit every locale at once, click the three dots and choose Edit all translations manually.

2 • Usage map

The hover menu always lists every place in the project where the keypath is used. Check whether a message is shared before changing its wording, and jump straight to any usage.

A popular bonus use: find a place in code by text. Paste a string copied from the rendered page into the editor's search, then hover the matching value in the JSON file. Loccy shows every place it's used.

3 • Global keypath rename

Click the three dots in the hover menu and choose rename. Loccy renames the keypath everywhere, in all translation files and all code usages, in one operation.

4 • Insert existing message

Reuse a translation that already exists instead of creating a duplicate. Place your cursor where the keypath should go, run Loccy: Insert Existing Message..., then pick the message.

5 • Missing-translation warnings

When a keypath has at least one empty or missing translation, the inline preview shows a warning.

Showcase: AI features

Need a paid subscription, which also helps fund the project. New accounts get free requests to start.

Every action follows your loccy.yaml styleguide, so results match your project's voice without repeating instructions.

💡 Prefer video over GIFs? Same walkthrough in the docs: loccy.dev/docs/extension/ai-features

1 • Extract and Translate

Turns static text into a message in one step: generates the keypath and translations for all project locales. Place your cursor inside the static text and run Loccy: Extract and Translate (also in the editor context menu).

No selection needed: other extensions make you select the full text, Loccy resolves the boundaries from a cursor sitting anywhere inside the string. A small detail, and a lot of work went into getting it right.

2 • Suggest Contextual Translation

Creates a message based on the surrounding code, for when you know a spot needs text but haven't drafted it yet. Place your cursor in the desired location and run Loccy: Suggest Contextual Translation.

3 • Edit one translation, sync the rest

When you edit a translation from the hover menu, Loccy offers to update all other locales to match. Adjust the copy once in your native language and keep every locale consistent.

4 • Fill empty translations

Auto-fills all empty translations in a message. Click the three dots in the hover menu; the option appears when at least one translation is empty and at least one is filled.

5 • Adjust with a prompt

Rewrite text with a free-form instruction. For all translations at once, click the three dots in the hover menu. For a single one, click the pencil button, then choose Adjust with prompt....

Links

Website • GitHub • Discord