Présentation

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

Ce plugin détecte des erreurs d’implémentation courantes que nous avons rencontrées sur le terrain.

Installation

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

Deux règles sont incluses dans cette version initiale :

• static-jsx - Implique l’encapsulation correcte des variables dans les composants <T>
• static-string - Garantit l’utilisation de chaînes statiques dans les fonctions de traduction

Validation statique du JSX

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

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

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

Application des chaînes statiques

La règle static-string garantit que les fonctions de traduction n’acceptent que des chaînes constantes.

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 apporte les fonctionnalités de linting de base pour les modèles de traduction de React Core. Les versions futures élargiront la couverture des règles et ajouteront la correction automatique d'autres violations courantes.

Pour aller plus loin

• Composants variables - Gérer le contenu dynamique dans les traductions
• Traduction de chaînes - Traduire des chaînes de caractères simples