Présentation générale

@generaltranslation/react-core-linter 0.1.0 introduit des règles ESLint pour l’intégration de React Core de General Translation.

Ce plugin détecte des erreurs d’implémentation courantes que nous avons observées dans la pratique.

Installation

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

Deux règles sont incluses dans cette première version :

• static-jsx - Imposer une encapsulation correcte des variables dans les composants <T>
• static-string - Garantir l’utilisation de chaînes de caractères statiques dans les fonctions de traduction

Validation de JSX statique

La règle static-jsx empêche le contenu dynamique d’apparaître directement à l’intérieur des composants <T>. Le contenu dynamique doit être encapsulé dans des composants de variables.

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

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

Contrôle des chaînes statiques

La règle static-string garantit que les fonctions de traduction n’acceptent que des chaînes de caractères littérales.

const gt = useGT();

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

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

Configuration

Ajoutez ce qui suit à votre configuration ESLint :

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

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

Cette première version fournit des fonctionnalités de linting fondamentales pour les modèles de traduction de React Core. Les versions futures étendront la couverture des règles et ajouteront la correction automatique d'autres violations courantes.

Pour aller plus loin

• Variable Components - Gérer le contenu dynamique dans les traductions
• String Translation - Traduire des chaînes de texte simples