Descripción general

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

Este plugin detecta errores de implementación comunes que hemos observado en entornos reales.

Instalación

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

Se incluyen dos reglas en esta versión inicial:

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

Validación de JSX estático

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

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

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

Restricción a cadenas estáticas

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

const gt = useGT();

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

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

Configuración

Agrega lo siguiente 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 proporciona funcionalidades básicas de linting para los patrones de traducción de React Core. Las versiones futuras ampliarán la cobertura de reglas y agregarán correcciones automáticas para otras infracciones comunes.

Lecturas recomendadas

• Variable Components - Gestiona contenido dinámico en las traducciones
• String Translation - Traduce cadenas de texto simples