# General Translation React SDKs (gt-react, gt-next): Regole di lint
URL: https://generaltranslation.com/it/docs/react/reference/lint-rules.mdx
---

title: Regole di lint
description: Riferimento delle regole del linter React Core di General Translation, che mantengono statico e corretto il contenuto traducibile. Riferimento API per le regole del linter React Core.

---

Il linter React Core di General Translation (`@generaltranslation/react-core-linter`) è un plugin ESLint che rileva i più comuni errori di integrazione: contenuto dinamico all'interno di componenti traducibili, stringhe non statiche nelle funzioni di traduzione e attributi non supportati. La configurazione `recommended` abilita tutte le regole come errori e due delle tre regole possono essere corrette automaticamente. Per l'installazione e la configurazione di ESLint, consulta la guida [Linting del codice](/docs/react/guides/linting-your-code).

*Le regole rilevano componenti e funzioni di General Translation in base alla relativa sorgente di importazione. `gt-react`, `gt-next` e `gt-react-native` sono riconosciuti per impostazione predefinita; aggiungi altri pacchetti, come `gt-tanstack-start`, con l'opzione [`libs`](#libs).*

## Regole [#rules]

| Regola                                      | Cosa segnala                                                                                                                                                                                                                                                 | Correzione automatica |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| [`static-string`](#static-string)           | Stringhe dinamiche o non statiche passate alle funzioni di traduzione ([`useGT`](/docs/react/reference/hooks/use-gt), [`getGT`](/docs/node/reference/functions/get-gt), [`msg`](/docs/react/reference/functions/msg)), oltre a variabili sugar non statiche. | Sì                    |
| [`static-jsx`](#static-jsx)                 | contenuto dinamico all&#39;interno di [`<T>`](/docs/react/reference/components/t) che non è racchiuso in un componente variabile.                                                                                                                            | Sì                    |
| [`no-data-attrs-on-branch`](#no-data-attrs) | Attributi `data-*` su [`<Branch>`](/docs/react/reference/components/branch), che il componente ignora.                                                                                                                                                       | No                    |

Tutte e tre le regole sono impostate su `error` nella configurazione `recommended` e accettano l&#39;opzione condivisa [`libs`](#libs).

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

**Correzione automatica** Sì · **Consigliato** `error`

Le funzioni di registrazione come `gt` (da [`useGT`](/docs/react/reference/hooks/use-gt) o `getGT`) e [`msg`](/docs/react/reference/functions/msg) possono accettare solo stringhe statiche, perché il compilatore ne estrae il contenuto in fase di build. Questa regola segnala un primo argomento dinamico e ti orienta verso l&#39;interpolazione in stile ICU, in cui le variabili vengono passate nell&#39;oggetto options anziché concatenate alla stringa.

### Come funziona

* **Contenuto statico obbligatorio.** Il primo argomento deve essere una stringa letterale (oppure, per [`msg`](/docs/react/reference/functions/msg), un array di stringhe letterali). La concatenazione di stringhe e i template literal che interpolano variabili vengono segnalati.
* **Correzione automatica ICU.** Quando il formato è ICU (quello predefinito), la regola riscrive le espressioni dinamiche correggibili in una stringa ICU più un oggetto options. I ternari diventano clausole `select` e le altre espressioni diventano segnaposto `{varN}`.
* **[`derive`](/docs/react/reference/functions/derive) è consentito.** Una chiamata a [`derive`](/docs/react/reference/functions/derive) — autonoma o concatenata con parti statiche — è consentita, poiché le sue varianti vengono risolte in fase di build.
* **Variabili sugar statiche.** Le chiavi dei metadati nell&#39;oggetto options devono essere statiche, ma il tipo richiesto varia: `$id` e `$format` devono essere stringhe statiche, `$context` deve essere una stringa statica o una chiamata a [`derive`](/docs/react/reference/functions/derive), `$maxChars` deve essere un numero letterale e `$requiresReview` deve essere un valore booleano letterale.
* **Validazione ICU.** Quando una stringa usa il formato ICU, la regola ne valida la sintassi e segnala `Invalid ICU message format` se il messaggio non è valido.

### Esempi

```tsx
// ❌ Errato — valore dinamico concatenato nella stringa
const gt = useGT();
gt('Hello ' + name);
gt(`Hello ${name}!`);

// ✅ Corretto — interpolazione ICU, variabile passata nell'oggetto options
const gt = useGT();
gt('Hello {name}!', { name });
```

```tsx
// ❌ Errato — la variabile sugar non è una stringa statica
msg('Save', { $context: label });

// ✅ Corretto — variabile sugar statica
msg('Save', { $context: 'a button label' });

// ✅ Corretto — varianti build-time con derive
gt('Hello ' + derive(getName()));
```

### Opzioni

Supporta l&#39;opzione condivisa [`libs`](#libs).

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

**Correzione automatica** Sì · **Consigliato** `error`

Il componente [`<T>`](/docs/react/reference/components/t) deve contenere solo contenuto figlio statico, in modo che il compilatore possa estrarlo. Questa regola segnala il contenuto dinamico — variabili, chiamate di funzione ed espressioni membro — all&#39;interno di `<T>` e richiede che sia avvolto in un componente variabile: [`<Var>`](/docs/react/reference/components/var), [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) o [`<DateTime>`](/docs/react/reference/components/datetime).

### Come funziona

* **Solo contenuti figli statici.** All&#39;interno di `<T>` sono consentite solo stringhe, numeri, booleani e template literal senza interpolazione. Qualsiasi altra espressione viene segnalata.
* **Racchiusura automatica in `<Var>`.** Un&#39;espressione segnalata viene racchiusa in [`<Var>`](/docs/react/reference/components/var) (importandolo se necessario) in modo che il valore venga visualizzato senza essere tradotto.
* **Conversione dei rami.** Un ternario (`cond ? a : b`) o un logical-and (`cond && a`) viene invece convertito in un [`<Branch>`](/docs/react/reference/components/branch).
* **Attributi di branching.** La regola controlla anche i rami di contenuto di [`<Branch>`](/docs/react/reference/components/branch) e [`<Plural>`](/docs/react/reference/components/plural), richiedendo che il valore di ciascun ramo sia statico o JSX.

### Esempi

```tsx
// ❌ Errato — contenuto dinamico direttamente all'interno di <T>
<T>{name}</T>;
<T>{getGreeting()}</T>;

// ✅ Corretto — contenuto dinamico racchiuso in un componente variabile
<T><Var>{name}</Var></T>;
<T>You have <Num>{count}</Num> messages.</T>;
```

```tsx
// ❌ Errato — condizionale inline dentro <T>
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Corretto — la correzione automatica lo converte in un <Branch>
<T>
  <Branch branch={isActive} true="Active">Inactive</Branch>
</T>;
```

### Opzioni

Accetta l&#39;opzione [`libs`](#libs) condivisa.

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

**Correzione automatica** No · **Consigliato** `error`

Il componente [`<Branch>`](/docs/react/reference/components/branch) ignora qualsiasi attributo con prefisso `data-`, perché tratta le props non riservate come valori del branch. Questa regola segnala gli attributi `data-*` su `<Branch>` per evitare che vengano ignorati senza avviso. Non esiste una correzione automatica; rimuovi l&#39;attributo oppure spostalo in un elemento contenitore.

### Esempi

```tsx
// ❌ Errato — l'attributo data-* viene ignorato da <Branch>
<Branch branch={status} data-testid="status" active="Active" inactive="Inactive" />;

// ✅ Corretto — sposta l'attributo in un elemento contenitore
<span data-testid="status">
  <Branch branch={status} active="Active" inactive="Inactive" />
</span>;
```

### Opzioni

Supporta l&#39;opzione condivisa [`libs`](#libs).

## Opzioni [#options]

Tutte le regole accettano la stessa opzione.

### `libs` [#libs]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** `['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']`

L&#39;elenco dei moduli che la regola considera pacchetti di General Translation. Un componente o una funzione viene controllato solo se è importato da uno di questi moduli, quindi gli import con alias vengono risolti correttamente. Aggiungi il pacchetto del tuo framework se non è incluso nell&#39;elenco predefinito — per esempio, `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 }],
    },
  },
];
```