# General Translation React SDKs (gt-react, gt-next): Règles de linting
URL: https://generaltranslation.com/fr/docs/react/reference/lint-rules.mdx
---

title: Règles de linting
description: Référence des règles du linter React Core de General Translation qui garantissent que le contenu traduisible reste statique et correct. Référence de l’API des règles du linter React Core.

---

Le linter React Core de General Translation (`@generaltranslation/react-core-linter`) est un plugin ESLint qui détecte les erreurs d’intégration courantes : contenu dynamique dans les composants traduisibles, chaînes non statiques dans les fonctions de traduction et attributs non pris en charge. Sa configuration `recommended` active toutes les règles au niveau erreur, et deux des trois règles sont corrigées automatiquement. Pour l’installation et la configuration d’ESLint, consultez le guide [Appliquer le linting à votre code](/docs/react/guides/linting-your-code).

*Les règles détectent les composants et fonctions de General Translation à partir de leur source d’import. `gt-react`, `gt-next` et `gt-react-native` sont reconnus par défaut ; ajoutez d’autres packages, comme `gt-tanstack-start`, avec l’option [`libs`](#libs).*

## Règles [#rules]

| Règle                                       | Ce qu’elle signale                                                                                                                                                                                                                                                               | Correction automatique |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| [`static-string`](#static-string)           | Des chaînes dynamiques ou non statiques passées aux fonctions de traduction ([`useGT`](/docs/react/reference/hooks/use-gt), [`getGT`](/docs/node/reference/functions/get-gt), [`msg`](/docs/react/reference/functions/msg)), ainsi que des variables de raccourci non statiques. | Oui                    |
| [`static-jsx`](#static-jsx)                 | Du contenu dynamique dans [`<T>`](/docs/react/reference/components/t) qui n’est pas encapsulé dans un composant variable.                                                                                                                                                      | Oui                    |
| [`no-data-attrs-on-branch`](#no-data-attrs) | Des attributs `data-*` sur [`<Branch>`](/docs/react/reference/components/branch), que le composant ignore.                                                                                                                                                                       | Non                    |

Les trois règles sont définies sur `error` dans la configuration `recommended` et acceptent l’option partagée [`libs`](#libs).

## `static-string` [#static-string]

**Correction automatique** Oui · **Recommandé** `error`

Les fonctions d’enregistrement telles que `gt` (de [`useGT`](/docs/react/reference/hooks/use-gt) ou `getGT`) et [`msg`](/docs/react/reference/functions/msg) ne peuvent accepter que des chaînes statiques, car le compilateur en extrait le contenu au moment de la build. Cette règle signale un premier argument dynamique et vous oriente vers une interpolation au format ICU, où les variables sont transmises dans l’objet d’options au lieu d’être concaténées à la chaîne.

### Fonctionnement

* **Contenu statique requis.** Le premier argument doit être un littéral de chaîne (ou, pour [`msg`](/docs/react/reference/functions/msg), un tableau de littéraux de chaîne). La concaténation de chaînes et les littéraux de gabarit qui interpolent des variables sont signalés.
* **Correction automatique de l’ICU.** Lorsque le format est ICU (par défaut), la règle réécrit les expressions dynamiques corrigeables en une chaîne ICU accompagnée d’un objet d’options. Les expressions ternaires deviennent des instructions `select` et les autres expressions deviennent des espaces réservés `{varN}`.
* **[`derive`](/docs/react/reference/functions/derive) est autorisé.** Un appel à [`derive`](/docs/react/reference/functions/derive) — autonome ou concaténé avec des parties statiques — est autorisé, puisque ses variantes sont résolues au build.
* **Variables utilitaires statiques.** Les clés de métadonnées de l’objet d’options doivent être statiques, mais le type requis varie : `$id` et `$format` doivent être des chaînes statiques, `$context` doit être une chaîne statique ou un appel à [`derive`](/docs/react/reference/functions/derive), `$maxChars` doit être un littéral numérique, et `$requiresReview` doit être un littéral booléen.
* **Validation de l’ICU.** Lorsqu’une chaîne utilise le format ICU, la règle valide sa syntaxe et signale `Invalid ICU message format` si le message est mal formé.

### Exemples

```tsx
// ❌ Incorrect — valeur dynamique concaténée dans la chaîne
const gt = useGT();
gt('Hello ' + name);
gt(`Hello ${name}!`);

// ✅ Correct — interpolation ICU, variable passée dans l'objet options
const gt = useGT();
gt('Hello {name}!', { name });
```

```tsx
// ❌ Incorrect — la variable sugar n'est pas une chaîne statique
msg('Save', { $context: label });

// ✅ Correct — variable sugar statique
msg('Save', { $context: 'a button label' });

// ✅ Correct — variantes à la compilation avec derive
gt('Hello ' + derive(getName()));
```

### Options

Prend en charge l’option partagée [`libs`](#libs).

## `static-jsx` [#static-jsx]

**Correction automatique** Oui · **Recommandé** `error`

Le composant [`<T>`](/docs/react/reference/components/t) ne doit contenir que des éléments enfants statiques afin que le compilateur puisse les extraire. Cette règle signale tout contenu dynamique — variables, appels de fonction, expressions de membre — à l’intérieur de `<T>` et impose de l’entourer d’un composant 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).

### Fonctionnement

* **Éléments enfants statiques uniquement.** Dans `<T>`, seules les chaînes, les nombres, les booléens et les littéraux de gabarit sans interpolation sont autorisés. Toute autre expression est signalée.
* **Encapsulation automatique dans `<Var>`.** Une expression signalée est entourée de [`<Var>`](/docs/react/reference/components/var) (en l’important si nécessaire) afin que sa valeur s’affiche sans être traduite.
* **Conversion en branches.** Un ternaire (`cond ? a : b`) ou un ET logique (`cond && a`) est converti à la place en [`<Branch>`](/docs/react/reference/components/branch).
* **Attributs de branchement.** La règle vérifie également les branches de contenu de [`<Branch>`](/docs/react/reference/components/branch) et de [`<Plural>`](/docs/react/reference/components/plural), en exigeant que la valeur de chaque branche soit statique ou du JSX.

### Exemples

```tsx
// ❌ Incorrect — contenu dynamique directement à l'intérieur de <T>
<T>{name}</T>;
<T>{getGreeting()}</T>;

// ✅ Correct — contenu dynamique encapsulé dans un composant variable
<T><Var>{name}</Var></T>;
<T>You have <Num>{count}</Num> messages.</T>;
```

```tsx
// ❌ Incorrect — conditionnel inline à l'intérieur de <T>
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Correct — la correction automatique le convertit en <Branch>
<T>
  <Branch branch={isActive} true="Active">Inactive</Branch>
</T>;
```

### Options

Prend en charge l’option partagée [`libs`](#libs).

## `no-data-attrs-on-branch` [#no-data-attrs]

**Correction automatique** Non · **Recommandé** `error`

Le composant [`<Branch>`](/docs/react/reference/components/branch) ignore tout attribut préfixé par `data-`, car il traite les props non réservées comme des valeurs de branche. Cette règle signale les attributs `data-*` sur `<Branch>` pour éviter qu’ils ne soient ignorés sans avertissement. Il n’existe pas de correction automatique ; supprimez l’attribut ou déplacez-le vers un élément conteneur.

### Exemples

```tsx
// ❌ Incorrect — l'attribut data-* est ignoré par <Branch>
<Branch branch={status} data-testid="status" active="Active" inactive="Inactive" />;

// ✅ Correct — déplacer l'attribut vers un élément parent
<span data-testid="status">
  <Branch branch={status} active="Active" inactive="Inactive" />
</span>;
```

### Options

Prend en charge l’option partagée [`libs`](#libs).

## Options [#options]

Chaque règle accepte cette même option.

### `libs` [#libs]

**Type** `string[]` · **Facultatif** · **Par défaut** `['gt-react', 'gt-next', 'gt-react-native', 'gt-i18n', '@generaltranslation/react-core/components', '@generaltranslation/react-core/components-rsc', '@generaltranslation/react-core/hooks', '@generaltranslation/react-core/pure']`

La liste des modules que la règle considère comme des packages General Translation. Un composant ou une fonction n’est vérifié que lorsqu’il est importé depuis l’un de ces modules, afin que les imports aliasés soient correctement résolus. Ajoutez le package de votre framework s’il ne figure pas dans la liste par défaut — par exemple, `gt-tanstack-start`:

```js title="eslint.config.js"
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 }],
    },
  },
];
```