Panoramica

@generaltranslation/react-core-linter 0.1.0 introduce regole ESLint per l'integrazione con General Translation React Core.

Questo plugin individua gli errori di implementazione più comuni che abbiamo riscontrato in produzione.

Installazione

npm install @generaltranslation/react-core-linter --save-dev

Questa versione iniziale include due regole:

• static-jsx - Applica il corretto incapsulamento delle variabili all'interno dei componenti <T>
• static-string - Garantisce che le stringhe nelle funzioni di traduzione siano statiche

Validazione JSX statica

La regola static-jsx impedisce al contenuto dinamico di comparire direttamente all'interno dei componenti <T>. Il contenuto dinamico deve essere racchiuso nei componenti variabili.

// ❌ Wrong
<T>Hello {userName}!</T>

// ✅ Corretto  
<T>Hello <Var>{userName}</Var>!</T>

Vincolo a stringhe statiche

La regola static-string garantisce che le funzioni di traduzione accettino solo stringhe statiche.

const gt = useGT();

// ❌ Wrong
gt(`Hello ${name}`)
gt('Hello ' + name)

// ✅ Corretto
gt('Hello {name}!', { name })

Configurazione

Aggiungi alla configurazione di ESLint:

import { defineConfig } from 'eslint';
import gtLint from '@generaltranslation/react-core-linter';

export default defineConfig([
  gtLint.configs.recommended,
]);

Questa versione iniziale fornisce funzionalità di linting di base per i pattern di traduzione di React Core. Le versioni successive estenderanno la copertura delle regole e aggiungeranno la correzione automatica per altre violazioni comuni.

Approfondimenti

• Variable Components - Gestire contenuti dinamici nelle traduzioni
• String Translation - Tradurre semplici stringhe di testo