Translations Fast Visualizer
English | Español
English
A lightweight, zero-dependency, and completely offline Visual Studio Code extension to instantly visualize translation strings from your local JSON files when hovering over translation keys in your source code.
Features
- Instant Hover Tooltips: Hover over a translation key (e.g.,
t('key')) and see a JSDoc-style tooltip listing all localized values.
- Multiple Paths & Glob Patterns: Configure one or more paths/patterns (e.g.,
src/ui/translations or src/screens/**/*.json) to load JSON files.
- Smart Directory Namespacing: Prevents collisions! If you have multiple files with the same name (e.g.,
Home/en.json and Profile/en.json), the extension automatically namespaces the keys (e.g., Home.title and Profile.title).
- Offline Caching & Watcher: The extension reads local files directly. It sets up a file watcher to automatically reload the cache when any translation JSON changes.
- Sidebar UI Panel: A dedicated sidebar webview to add/remove search paths, configure translation functions, toggle recursive scanning, and refresh the cache on demand.
Supported Languages
Works in:
- TypeScript (
.ts, .tsx)
- JavaScript (
.js, .jsx)
- HTML (
.html)
- Vue (
.vue)
- Svelte (
.svelte)
You can configure the extension either using VS Code settings (settings.json) or directly inside the Translations Visualizer sidebar panel:
- Locales Folders / Patterns (
translations-fast-visualizer.localesPaths):
An array of directories or glob patterns where your JSON files are stored.
- Example:
["src/ui/translations", "src/components/**/locales/*.json"]
- Search Recursively (
translations-fast-visualizer.recursiveSearch):
If checked, recursively scans subdirectories of the configured folders for JSON files. (Ignored for direct glob patterns).
- Translate Functions (
translations-fast-visualizer.translationFunctions):
Comma-separated list of function names that wrap your keys.
- Default:
["t", "translate"]
- Example:
t, translate, trans, i18n.t
- Hover Mode (
translations-fast-visualizer.hoverMode):
functionOnly (Default): Only triggers the tooltip when hovering over keys inside a translation function call (e.g., t('key')).anyString: Triggers the tooltip when hovering over any quoted string in your code that matches a key in the cache.
Español
Una extensión para Visual Studio Code ligera, sin dependencias y completamente offline que te permite visualizar al instante los textos de traducción de tus JSONs locales al pasar el cursor (hover) por encima de las claves de traducción en tu código.
Características
- Tooltips al instante: Haz hover sobre una clave de traducción (ej:
t('key')) y visualiza una ventana flotante con las traducciones en todos los idiomas configurados.
- Múltiples Rutas y Patrones Glob: Configura uno o más directorios o patrones glob (ej:
src/ui/translations o src/screens/**/*.json) para cargar tus JSONs.
- Espacio de Nombres Inteligente: ¡Evita colisiones! Si tienes múltiples archivos con el mismo nombre en diferentes carpetas (ej:
Home/en.json y Profile/en.json), la extensión les asigna un espacio de nombres automático (ej: Home.title y Profile.title).
- Caché Offline y Watcher: La extensión lee directamente tus archivos locales. Detecta cambios al guardar cualquier JSON de traducción y recarga la caché automáticamente.
- Panel de Ajustes en Barra Lateral: Una vista interactiva dedicada para añadir/eliminar rutas, configurar nombres de funciones de traducción, activar escaneo recursivo y refrescar la caché manualmente.
Lenguajes Soportados
Funciona en:
- TypeScript (
.ts, .tsx)
- JavaScript (
.js, .jsx)
- HTML (
.html)
- Vue (
.vue)
- Svelte (
.svelte)
Cómo Configurar
Puedes configurarlo a través de los ajustes normales de VS Code (settings.json) o directamente en el panel de Translations Visualizer de la barra lateral:
- Locales Folders / Patterns (
translations-fast-visualizer.localesPaths):
Una lista de carpetas o patrones glob donde se guardan tus traducciones.
- Ejemplo:
["src/ui/translations", "src/components/**/locales/*.json"]
- Search Recursively (
translations-fast-visualizer.recursiveSearch):
Si está activo, escanea subcarpetas de manera recursiva en busca de JSONs. (Se ignora si usas un patrón glob directo).
- Translate Functions (
translations-fast-visualizer.translationFunctions):
Lista separada por comas de las funciones que envuelven tus claves.
- Por defecto:
["t", "translate"]
- Ejemplo:
t, translate, trans, i18n.t
- Hover Mode (
translations-fast-visualizer.hoverMode):
functionOnly (Por defecto): Solo muestra el tooltip si la clave está dentro de una llamada de función (ej: t('key')).anyString: Muestra el tooltip para cualquier string entre comillas que coincida con una clave guardada en caché.
| |
