# General Translation Integrations: Inicio rápido
URL: https://generaltranslation.com/es/docs/integrations/paraglide/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Guarda el código fuente que rodea cada mensaje de Paraglide JS y envíalo a traducción como contexto.

`@generaltranslation/paraglide-js` localiza cada uso de un mensaje de Paraglide JS en tu aplicación y guarda el código que lo rodea. Así, un mensaje como "Order" llega a la traducción acompañado del código que indica si se trata de un botón, un encabezado, un sustantivo o un verbo.

Lee tus archivos de origen. No modifica Paraglide JS y nunca ejecuta tu empaquetador, así que funciona sea cual sea la forma en que se compile tu aplicación.

## Antes de empezar [#before-start]

Necesitas:

* Node.js 20 o posterior.
* Paraglide JS 1, 2 o 3, compilado al menos una vez para que exista su directorio de salida.
* Mensajes almacenados en el formato de mensajes de inlang (`plugin.inlang.messageFormat`), como `messages/en.json`.
* Un proyecto que traduzca esos archivos de mensajes con la CLI. (Consulta el [Inicio rápido de la CLI](/docs/cli/quickstart)).
* Para los componentes que no estén escritos en JavaScript, TypeScript ni JSX, tener instalada en tu aplicación la herramienta de lenguaje del framework. (Consulta [Formatos de archivo compatibles](/docs/integrations/paraglide/reference/file-formats)).

## Inicio rápido [#quickstart]

Instala el paquete, recopila el contexto y traduce como de costumbre.

### 1. Instala `@generaltranslation/paraglide-js`

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install --save-dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/paraglide-js
    ```
  </Tab>
</Tabs>

### 2. Recopila el contexto

Ejecuta [`paraglide-context`](/docs/integrations/paraglide/reference/paraglide-context) desde el directorio de tu app. Con `--verbose`, se muestra cuántos usos encontró y qué directorios de salida de Paraglide JS utilizó.

```bash
npx paraglide-context --verbose
```

Junto a cada archivo de mensajes de tu configuración regional base se genera un archivo de metadatos. Para cada mensaje utilizado, se incluye el código que rodea sus usos, agrupado por archivo de origen:

```json title="messages/en.metadata.json"
{
  "greeting": {
    "sourceCode": {
      "src/Header.tsx": [
        {
          "before": "import { m } from './paraglide/messages.js';\n…",
          "target": "  return <h1>{m.greeting({ username })}</h1>;",
          "after": "}\n…"
        }
      ]
    }
  }
}
```

<Callout type="info">
  Las advertencias indican qué se omitió y cómo solucionarlo: un alias de importación sin resolver, una herramienta de lenguaje que falta o un directorio que no se reconoció como salida de Paraglide JS. (Consulta [Resolución de importaciones](/docs/integrations/paraglide/guides/resolving-imports)).
</Callout>

### 3. Traduce tus mensajes

Ejecuta [`gt translate`](/docs/cli/reference/commands/translate). La CLI localiza cada archivo de metadatos junto a su archivo de mensajes y lo envía con los mensajes como [metadatos asociados a claves](/docs/cli/reference/keyed-metadata).

```bash
npx gt translate
```

Para mantener el contexto actualizado, recópilalo antes de cada traducción:

```json title="package.json"
{
  "scripts": {
    "translate": "paraglide-context && gt translate"
  }
}
```

<Callout type="info">
  Añadir contexto nuevo no basta para que un mensaje se vuelva a traducir. Un mensaje solo se vuelve a traducir cuando cambia su texto de origen.
</Callout>

## Next steps

- /docs/integrations/paraglide/guides/resolving-imports
- /docs/integrations/paraglide/guides/adding-file-formats

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.