Uso de la extensión de VSCode

Cómo aprovechar al máximo las herramientas automáticas en la Extensión de VSCode

Instalando

La extensión Quetzal está disponible en el Marketplace de VSCode.

Se puede buscar desde el panel de extensiones dentro de VSCode y Cursor.

Configuración

Verifique que la configuración de la extensión coincida con su proyecto. Abra la configuración de VSCode/Cursor y busque Quetzal

Lo más importante es asegurarse de configurar Quetzal: Translation Library a la biblioteca que está utilizando para su proyecto.

Uso

La extensión de Quetzal está diseñada para escribir automáticamente funciones t en tu código base de JavaScript.

Agrega cuatro comandos a tu Paleta de Comandos de VSCode/Cursor (Command + Shift + P para abrir):

1. Quetzal: Escanear cadenas visibles para el usuario
2. Quetzal: Escanear documento actual
3. Quetzal: Wrap Strings
4. Quetzal: Detener escaneo

Ejemplo: Componente Simple de Next.js

Supongamos que tienes el siguiente archivo abierto en VSCode/Cursor:

login.tsx

const LoginPage = () => {
  return (
    <div>
      <h1>Iniciar sesión</h1>
      <form>
        <input type="email" placeholder="Correo electrónico" />
        <input type="password" placeholder="Contraseña" />
        <button type="submit">Iniciar sesión</button>
      </form>
    </div>
  );
};

export default LoginPage;

Queremos actualizar esta página de inicio de sesión para que el texto (“Iniciar sesión”, “Correo electrónico” y “Contraseña”) se traduzca a todos los idiomas que tu proyecto admita.

Ejecutar un escaneo

Primero ejecute Quetzal: Escanear documento actual (Command + Shift + P para abrir la paleta de comandos)

Su editor entonces debería verse algo así:

El texto resaltado en verde parece ser texto que debe traducirse.

El texto resaltado en rojo parece ser texto que no debería traducirse.

¡Asegúrese de que no hayamos cometido errores! Si algo está en rojo pero debe ser traducido, pase el cursor sobre eso y haga clic en Traduce esta cadena

Por el contrario, si algo está verde pero no debe traducirse, pase el cursor sobre eso y haga clic en No traducir esta cadena

Envolver Cadenas

Luego, cuando todo se vea correcto, haga clic en Quetzal: Envolver cadenas en la parte superior derecha de su editor de código.

Tu archivo ahora debería verse así:

login.tsx

import { useI18n } from "@quetzallabs/i18n";

const LoginPage = () => {
  const { t } = useI18n();

  return (
    <div>
      <h1>{t("Iniciar sesión")}</h1>
      <form>
        <input type="email" placeholder={t("Correo electrónico")} />
        <input type="password" placeholder={t("Contraseña")} />
        <button type="submit">{t("Iniciar sesión")}</button>
      </form>
    </div>
  );
};
export default LoginPage;

Observe que todo el texto visible para sus usuarios ha sido envuelto en una función t, y la función t apropiada fue importada para este componente del lado del cliente.

¡Y listo!

Este archivo está marcado ahora, y Quetzal encontrará y traducirá el texto mostrado.

¿Qué pasa si tengo muchos archivos?

Si tienes muchos archivos que no se han integrado con Quetzal, ejecuta Quetzal: Escanear cadenas visibles para el usuario (Command + Shift + P para abrir la paleta de comandos)

Esto abrirá un menú para escanear varias carpetas de tu proyecto a la vez y ordenar todos los archivos según el número de cadenas que probablemente necesiten traducción.

Esto debería permitirte integrar rápidamente, incluso en una base de código grande.