Descripción general

@generaltranslation/react-core-linter 0.1.0 incorpora reglas de ESLint para la integración con General Translation React Core.

Este plugin detecta errores de implementación habituales que hemos observado en la práctica.

Instalación

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

En esta versión inicial se incluyen dos reglas:

• static-jsx - Exige envolver correctamente las variables en los componentes <T>
• static-string - Garantiza el uso de cadenas estáticas en las funciones de traducción

Validación estática de JSX

La regla static-jsx evita que el contenido dinámico aparezca directamente dentro de los componentes <T>. El contenido dinámico debe envolverse en componentes de variables.

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

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

Exigencia de cadenas estáticas

La regla static-string garantiza que las funciones de traducción solo acepten cadenas estáticas.

const gt = useGT();

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

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

Configuración

Añade esto a tu configuración de ESLint:

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

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

Esta versión inicial ofrece capacidades básicas de linting para los patrones de traducción de React Core. En versiones futuras, se ampliará la cobertura de reglas y se añadirá corrección automática para otras infracciones comunes.

Más información

• Componentes de variable - Gestiona contenido dinámico en las traducciones
• Traducción de cadenas - Traduce cadenas de texto sin formato