@generaltranslation/react-core-linter@0.1.0

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/config';
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.

Utilisez les composants variables pour le contenu dynamique et la traduction de chaînes pour les chaînes en texte brut.