# General Translation React SDKs (gt-react, gt-next): Linting de votre code
URL: https://generaltranslation.com/fr/docs/react/guides/linting-your-code.mdx
---
title: Linting de votre code
description: Comment repérer les erreurs d’internationalisation courantes avec le plugin ESLint de General Translation dans React, Next.js, TanStack Start et React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches

---

Le plugin ESLint de General Translation, `@generaltranslation/react-core-linter`, détecte les erreurs d’intégration courantes — contenu dynamique dans [`<T>`](/docs/react/reference/components/t), chaînes non statiques dans les fonctions de traduction et attributs non pris en charge — et peut en corriger automatiquement un grand nombre. Il fonctionne avec `gt-react`, `gt-next` et `gt-react-native`.

*Remarque : le plugin est en version pré-1.0 (`0.1.x`) et ses règles peuvent évoluer.*

## Installer le plugin [#install]

Ajoutez le plugin en tant que dépendance de développement.

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

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/react-core-linter
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/react-core-linter
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/react-core-linter
    ```
  </Tab>
</Tabs>

## Configurer ESLint [#configure]

Ajoutez la configuration `recommended` du plugin à votre configuration ESLint au format flat. Elle active toutes les règles en tant qu’erreurs.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    export default [
      gtLint.configs.recommended,
    ];
    ```
  </Tab>

  <Tab value="Next.js">
    Utilisez la configuration recommandée avec `eslint-config-next`.

    ```js title="eslint.config.mjs"
    import { defineConfig, globalIgnores } from 'eslint/config';
    import nextVitals from 'eslint-config-next/core-web-vitals';
    import nextTs from 'eslint-config-next/typescript';
    import gtLint from '@generaltranslation/react-core-linter';

    export default defineConfig([
      ...nextVitals,
      ...nextTs,
      gtLint.configs.recommended,
      globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts', 'eslint.config.*']),
    ]);
    ```
  </Tab>

  <Tab value="TanStack Start">
    Les règles détectent les composants de traduction et les fonctions à partir de leur source d’import. `gt-tanstack-start` ne figure pas dans la liste par défaut, ajoutez-le donc avec l’option `libs` sur chaque règle.

    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    const libs = ['gt-tanstack-start'];

    export default [
      {
        plugins: { '@generaltranslation/react-core-linter': gtLint },
        rules: {
          '@generaltranslation/react-core-linter/static-jsx': ['error', { libs }],
          '@generaltranslation/react-core-linter/static-string': ['error', { libs }],
          '@generaltranslation/react-core-linter/no-data-attrs-on-branch': ['error', { libs }],
        },
      },
    ];
    ```
  </Tab>

  <Tab value="React Native">
    ```js title="eslint.config.js"
    import gtLint from '@generaltranslation/react-core-linter';

    export default [
      gtLint.configs.recommended,
    ];
    ```
  </Tab>
</Tabs>

Exécutez ESLint comme d’habitude ; ajoutez `--fix` pour appliquer les corrections automatiques.

```bash
npx eslint . --fix
```

## Ce que les règles repèrent [#rules]

La configuration `recommended` active trois règles, toutes signalées comme des erreurs :

* **`static-jsx`** — signale le contenu dynamique dans `<T>` et exige qu’il soit encapsulé dans un composant de variable ([`<Var>`](/docs/react/reference/components/var), [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) ou [`<DateTime>`](/docs/react/reference/components/datetime)). Corrigible automatiquement.
* **`static-string`** — exige que les fonctions de traduction ([`useGT`](/docs/react/reference/hooks/use-gt), [`getGT`](/docs/node/reference/functions/get-gt), [`msg`](/docs/react/reference/functions/msg)) reçoivent des chaînes littérales statiques, et oriente les valeurs dynamiques vers une interpolation ICU, par exemple `gt('Hello, {name}!', { name })`. Corrigible automatiquement.
* **`no-data-attrs-on-branch`** — signale les attributs `data-*` sur [`<Branch>`](/docs/react/reference/components/branch), que le composant ignore.

Consultez la [référence des règles de lint](/docs/react/reference/lint-rules) pour les options et les exemples de chaque règle.
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches