# General Translation React SDKs (gt-react, gt-next, gt-react-native): Regole di lint URL: https://generaltranslation.com/it/docs/react/reference/lint-rules.mdx Docs index: https://generaltranslation.com/llms.txt Description: Mantieni statico e corretto il contenuto traducibile con le regole del linter React Core. Riferimento 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'interno di [``](/docs/react/reference/components/t) che non è racchiuso in un componente variabile. | Sì | | [`no-data-attrs-on-branch`](#no-data-attrs) | Attributi `data-*` su [``](/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'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'interpolazione in stile ICU, in cui le variabili vengono passate nell'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'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'opzione condivisa [`libs`](#libs). ## `static-jsx` [#static-jsx] **Correzione automatica** Sì · **Consigliato** `error` Il componente [``](/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'interno di [``](/docs/react/reference/components/t) e richiede che sia avvolto in un componente variabile: [``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency) o [``](/docs/react/reference/components/datetime). ### Come funziona * **Solo contenuti figli statici.** All'interno di [``](/docs/react/reference/components/t) sono consentite solo stringhe, numeri, booleani e template literal senza interpolazione. Qualsiasi altra espressione viene segnalata. * **Racchiusura automatica in [``](/docs/react/reference/components/var).** Un'espressione segnalata viene racchiusa in [``](/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 [``](/docs/react/reference/components/branch). * **Attributi di branching.** La regola controlla anche i rami di contenuto di [``](/docs/react/reference/components/branch) e [``](/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 {name}; {getGreeting()}; // ✅ Corretto — contenuto dinamico racchiuso in un componente variabile {name}; You have {count} messages.; ``` ```tsx // ❌ Errato — condizionale inline dentro {isActive ? 'Active' : 'Inactive'}; // ✅ Corretto — la correzione automatica lo converte in un Inactive ; ``` ### Opzioni Supporta l'opzione condivisa [`libs`](#libs). ## `no-data-attrs-on-branch` [#no-data-attrs] **Correzione automatica** No · **Consigliato** `error` Il componente [``](/docs/react/reference/components/branch) ignora qualsiasi attributo con prefisso `data-`, perché tratta le props non riservate come valori del ramo. Questa regola segnala gli attributi `data-*` su [``](/docs/react/reference/components/branch) per evitare che vengano ignorati senza avviso. Non esiste una correzione automatica; rimuovi l'attributo oppure spostalo in un elemento contenitore. ### Esempi ```tsx // ❌ Errato — l'attributo data-* viene ignorato da ; // ✅ Corretto — sposta l'attributo in un elemento contenitore ; ``` ### Opzioni Supporta l'opzione condivisa [`libs`](#libs). ## Opzioni condivise [#shared-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'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'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 }], }, }, ]; ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.