# General Translation React SDKs (gt-react, gt-next): Reglas del linter
URL: https://generaltranslation.com/es/docs/react/reference/lint-rules.mdx
---

title: Reglas del linter
description: Referencia de las reglas del linter de React Core de General Translation, que mantienen el contenido traducible estático y correcto. Referencia de la API de las reglas del linter de React Core.

---

El linter de React Core de General Translation (`@generaltranslation/react-core-linter`) es un plugin de ESLint que detecta errores de integración comunes: contenido dinámico dentro de componentes traducibles, cadenas no estáticas en funciones de traducción y atributos no compatibles. Su configuración `recommended` activa todas las reglas como errores, y dos de las tres reglas se corrigen automáticamente. Para la instalación y la configuración de ESLint, consulta la guía [Linting your code](/docs/react/guides/linting-your-code).

*Las reglas detectan los componentes y las funciones de General Translation por su origen de importación. `gt-react`, `gt-next` y `gt-react-native` se reconocen de forma predeterminada; añade otros paquetes, como `gt-tanstack-start`, con la opción [`libs`](#libs).*

## Reglas [#rules]

| Regla                                       | Qué detecta                                                                                                                                                                                                                                                     | Corrección automática |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| [`static-string`](#static-string)           | Cadenas dinámicas o no estáticas pasadas a funciones de traducción ([`useGT`](/docs/react/reference/hooks/use-gt), [`getGT`](/docs/node/reference/functions/get-gt), [`msg`](/docs/react/reference/functions/msg)), así como variables abreviadas no estáticas. | Sí                    |
| [`static-jsx`](#static-jsx)                 | Contenido dinámico dentro de [`<T>`](/docs/react/reference/components/t) que no está envuelto en un componente de variable.                                                                                                                                     | Sí                    |
| [`no-data-attrs-on-branch`](#no-data-attrs) | Atributos `data-*` en [`<Branch>`](/docs/react/reference/components/branch) que el componente ignora.                                                                                                                                                           | No                    |

Las tres reglas están configuradas como `error` en la configuración `recommended` y aceptan la opción compartida [`libs`](#libs).

## `static-string` [#static-string]

**Corrección automática** Sí · **Recomendado** `error`

Las funciones de registro, como `gt` (de [`useGT`](/docs/react/reference/hooks/use-gt) o `getGT`) y [`msg`](/docs/react/reference/functions/msg), solo pueden aceptar cadenas estáticas porque el compilador extrae su contenido en tiempo de compilación. Esta regla marca cuando el primer argumento es dinámico y te orienta hacia la interpolación de estilo ICU, donde las variables se pasan en el objeto de opciones en lugar de concatenarse en la cadena.

### Cómo funciona

* **Se requiere contenido estático.** El primer argumento debe ser un literal de cadena (o, para [`msg`](/docs/react/reference/functions/msg), una lista de literales de cadena). Se marcan la concatenación de cadenas y los literales de plantilla que interpolan variables.
* **Corrección automática de ICU.** Cuando el formato es ICU (el predeterminado), la regla reescribe las expresiones dinámicas corregibles como una cadena ICU más un objeto de opciones. Los ternarios se convierten en instrucciones `select` y las demás expresiones se convierten en marcadores `{varN}`.
* **Se permite [`derive`](/docs/react/reference/functions/derive).** Se permite una llamada a [`derive`](/docs/react/reference/functions/derive), ya sea por sí sola o concatenada con partes estáticas, ya que sus variantes se resuelven en tiempo de compilación.
* **Variables abreviadas estáticas.** Las claves de metadatos del objeto de opciones deben ser estáticas, pero el tipo requerido varía: `$id` y `$format` deben ser cadenas estáticas, `$context` debe ser una cadena estática o una llamada a [`derive`](/docs/react/reference/functions/derive), `$maxChars` debe ser un literal numérico y `$requiresReview` debe ser un literal booleano.
* **Validación de ICU.** Cuando una cadena usa el formato ICU, la regla valida su sintaxis y muestra `Invalid ICU message format` si el mensaje está mal formado.

### Ejemplos

```tsx
// ❌ Incorrecto — valor dinámico concatenado en la cadena
const gt = useGT();
gt('Hello ' + name);
gt(`Hello ${name}!`);

// ✅ Correcto — interpolación ICU, variable pasada en el options object
const gt = useGT();
gt('Hello {name}!', { name });
```

```tsx
// ❌ Incorrecto — la variable sugar no es una cadena estática
msg('Save', { $context: label });

// ✅ Correcto — variable sugar estática
msg('Save', { $context: 'a button label' });

// ✅ Correcto — variantes en tiempo de compilación con derive
gt('Hello ' + derive(getName()));
```

### Opciones

Acepta la opción [`libs`](#libs) compartida.

## `static-jsx` [#static-jsx]

**Corrección automática** Sí · **Recomendado** `error`

El componente [`<T>`](/docs/react/reference/components/t) solo debe tener children estático para que el compilador pueda extraerlo. Esta regla marca contenido dinámico —variables, llamadas a funciones y expresiones de acceso a propiedades— dentro de `<T>` y exige envolverlo en un componente de variable: [`<Var>`](/docs/react/reference/components/var), [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency) o [`<DateTime>`](/docs/react/reference/components/datetime).

### Cómo funciona

* **Solo `children` estáticos.** Dentro de `<T>`, solo se permiten strings, números, booleanos y literales de plantilla sin interpolación. Cualquier otra expresión se marca.
* **Envoltura automática en `<Var>`.** Una expresión marcada se envuelve en [`<Var>`](/docs/react/reference/components/var) (importándolo si hace falta) para que el valor se renderice sin traducirse.
* **Conversión de ramas.** Un ternario (`cond ? a : b`) o un AND lógico (`cond && a`) se convierte en un [`<Branch>`](/docs/react/reference/components/branch).
* **Atributos con ramas.** La regla también comprueba las ramas de contenido de [`<Branch>`](/docs/react/reference/components/branch) y [`<Plural>`](/docs/react/reference/components/plural), y exige que el valor de cada rama sea estático o JSX.

### Ejemplos

```tsx
// ❌ Incorrecto — contenido dinámico directamente dentro de <T>
<T>{name}</T>;
<T>{getGreeting()}</T>;

// ✅ Correcto — contenido dinámico envuelto en un componente de variable
<T><Var>{name}</Var></T>;
<T>You have <Num>{count}</Num> messages.</T>;
```

```tsx
// ❌ Incorrecto — condicional inline dentro de <T>
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ Correcto — la corrección automática lo convierte en un <Branch>
<T>
  <Branch branch={isActive} true="Active">Inactive</Branch>
</T>;
```

### Opciones

Admite la opción compartida [`libs`](#libs).

## `no-data-attrs-on-branch` [#no-data-attrs]

**Corrección automática** No · **Recomendado** `error`

El componente [`<Branch>`](/docs/react/reference/components/branch) ignora cualquier atributo con el prefijo `data-`, porque interpreta las props no reservadas como valores de rama. Esta regla marca los atributos `data-*` en `<Branch>` para evitar que se descarten silenciosamente. No hay corrección automática; elimina el atributo o muévelo a un elemento contenedor.

### Ejemplos

```tsx
// ❌ Incorrecto — el atributo data-* es ignorado por <Branch>
<Branch branch={status} data-testid="status" active="Active" inactive="Inactive" />;

// ✅ Correcto — mueve el atributo a un elemento contenedor
<span data-testid="status">
  <Branch branch={status} active="Active" inactive="Inactive" />
</span>;
```

### Opciones

Admite la opción compartida [`libs`](#libs).

## Opciones [#options]

Todas las reglas aceptan la misma opción.

### `libs` [#libs]

**Tipo** `string[]` · **Opcional** · **Predeterminado** `['gt-react', 'gt-next', 'gt-react-native', 'gt-i18n', '@generaltranslation/react-core/components', '@generaltranslation/react-core/components-rsc', '@generaltranslation/react-core/hooks', '@generaltranslation/react-core/pure']`

La lista de módulos de origen que la regla considera paquetes de General Translation. Un componente o función solo se comprueba cuando se importa desde uno de estos módulos, por lo que las importaciones con alias se resuelven correctamente. Añade el paquete de tu framework si no está en la lista predeterminada; por ejemplo, `gt-tanstack-start`:

```js title="eslint.config.js"
const libs = ['gt-tanstack-start'];

export default [
  {
    plugins: { '@generaltranslation/react-core-linter': gtLint },
    rules: {
      '@generaltranslation/react-core-linter/static-jsx': ['error', { libs }],
      '@generaltranslation/react-core-linter/static-string': ['error', { libs }],
      '@generaltranslation/react-core-linter/no-data-attrs-on-branch': ['error', { libs }],
    },
  },
];
```