# General Translation Integrations: Démarrage rapide
URL: https://generaltranslation.com/fr/docs/integrations/paraglide/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Enregistrez le code source qui entoure chaque message Paraglide JS et transmettez-le comme contexte pour la traduction.

`@generaltranslation/paraglide-js` repère chaque utilisation d’un message Paraglide JS dans votre application et enregistre le code qui l’entoure. Un message comme « Order » est ainsi transmis à la traduction accompagné du code qui indique s’il s’agit d’un bouton, d’un titre, d’un nom ou d’un verbe.

Il lit vos fichiers sources. Il ne modifie pas Paraglide JS et n’exécute jamais votre bundler : il fonctionne donc quelle que soit la façon dont votre application est compilée.

## Avant de commencer [#before-start]

Prérequis :

* Node.js 20 ou version ultérieure.
* Paraglide JS 1, 2 ou 3, compilé au moins une fois afin que son répertoire de sortie existe.
* Des messages stockés au format de messages inlang (`plugin.inlang.messageFormat`), par exemple `messages/en.json`.
* Un projet qui traduit ces fichiers de messages avec la CLI (consultez le [Démarrage rapide de la CLI](/docs/cli/quickstart)).
* Pour les composants qui ne sont pas écrits en JavaScript, TypeScript ou JSX, l’outil de langage du framework installé dans votre application (consultez [Formats de fichiers pris en charge](/docs/integrations/paraglide/reference/file-formats)).

## Démarrage rapide [#quickstart]

Installez le paquet, collectez le contexte, puis traduisez comme d'habitude.

### 1. Installer `@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. Collecter le contexte

Exécutez [`paraglide-context`](/docs/integrations/paraglide/reference/paraglide-context) depuis le répertoire de votre application. Avec `--verbose`, la commande affiche le nombre d&#39;occurrences trouvées ainsi que les répertoires de sortie Paraglide JS utilisés.

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

Chaque fichier de messages de votre paramètre régional de base est accompagné d&#39;un fichier de métadonnées placé à côté. Pour chaque message utilisé, ce fichier répertorie le code qui entoure chacune de ses utilisations, regroupé par fichier source :

```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">
  Les avertissements précisent ce qui a été ignoré et comment y remédier : un alias d&#39;importation non résolu, un outil de langage manquant ou un répertoire non reconnu comme sortie de Paraglide JS. (Voir [Résoudre les importations](/docs/integrations/paraglide/guides/resolving-imports).)
</Callout>

### 3. Traduisez vos messages

Exécutez [`gt translate`](/docs/cli/reference/commands/translate). Le CLI repère chaque fichier de métadonnées placé à côté de son fichier de messages et l&#39;envoie avec les messages sous forme de [métadonnées associées aux clés](/docs/cli/reference/keyed-metadata).

```bash
npx gt translate
```

Pour que le contexte reste à jour, collectez-le avant chaque traduction :

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

<Callout type="info">
  Un nouveau contexte ne suffit pas, à lui seul, à retraduire un message. Un message n&#39;est retraduit que lorsque son texte source est modifié.
</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.