eslint-plugin-formatjs

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Este plugin de eslint te permite aplicar reglas específicas en tus mensajes ICU.

Uso

npm
yarn

npm i -D eslint-plugin-formatjs

yarn add -D eslint-plugin-formatjs

Luego, en tu configuración de eslint:

import formatjs from 'eslint-plugin-formatjs'

export default [
  // other configs...
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-offset': 'error',
    },
  },
]

React

Actualmente utiliza intl.formatMessage, defineMessage, defineMessages, y <FormattedMessage> de react-intl como puntos de verificación. Por lo tanto, en tu código usa uno de estos mecanismos:

import {defineMessages, defineMessage} from 'react-intl'

const messages = defineMessages({
  foo: {
    defaultMessage: 'foo',
    description: 'bar',
  },
})

defineMessage({
  defaultMessage: 'single message',
})

import {FormattedMessage} from 'react-intl'
;<FormattedMessage defaultMessage="foo" description="bar" />

function foo() {
  intl.formatMessage({
    defaultMessage: 'foo',
  })
}

Vue

Verifica llamadas a intl.formatMessage y $formatMessage tanto en archivos JS/TS como en componentes SFC .vue. Por ejemplo:

<template>
  <p>
    {{
      $formatMessage({
        defaultMessage: 'today is {now, date}',
      })
    }}
  </p>
</template>

Configuraciones compartidas

Estas configuraciones se aplican globalmente a todas las reglas de formatjs una vez definidas. Consulta Configuraciones compartidas para más detalles sobre cómo configurarlas.

`formatjs.additionalFunctionNames`

Similar a babel-plugin-formatjs y @formatjs/ts-transformer, permite especificar nombres de funciones adicionales para verificar además de formatMessage y $formatMessage.

`formatjs.additionalComponentNames`

Similar a babel-plugin-formatjs y @formatjs/ts-transformer, permite especificar nombres de componentes adicionales para verificar además de FormattedMessage.

Configuraciones predefinidas

El plugin ofrece estas dos configuraciones predefinidas:

recommended
strict

Al usarlas, puedes simplificar tu configuración manteniendo un conjunto de reglas que cumple con tus estándares de calidad.

Ejemplo

import formatjs from 'eslint-plugin-formatjs'

export default [
  formatjs.configs.recommended,
  // Other configs...
]

Reglas disponibles

`blocklist-elements`

Bloquea el uso de elementos específicos en mensajes ICU.

Por qué

Algunos proveedores de traducción no pueden manejar elementos como selectordinal

Elementos disponibles

enum Element {
  // literal text, like `defaultMessage: 'some text'`
  literal = 'literal',
  // placeholder, like `defaultMessage: '{placeholder} var'`
  argument = 'argument',
  // number, like `defaultMessage: '{placeholder, number} var'`
  number = 'number',
  // date, like `defaultMessage: '{placeholder, date} var'`
  date = 'date',
  // time, like `defaultMessage: '{placeholder, time} var'`
  time = 'time',
  // select, like `defaultMessage: '{var, select, foo{one} bar{two}} var'`
  select = 'select',
  // selectordinal, like `defaultMessage: '{var, selectordinal, one{one} other{two}} var'`
  selectordinal = 'selectordinal',
  // plural, like `defaultMessage: '{var, plural, one{one} other{two}} var'`
  plural = 'plural',
}

Ejemplo

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/blocklist-elements': [2, ['selectordinal']],
    },
  },
]

`enforce-description`

Obliga a incluir description en el descriptor del mensaje.

Por qué

La descripción proporciona contexto útil para los traductores

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // WORKS
  foo: {
    defaultMessage: 'foo',
    description: 'bar',
  },
  // FAILS
  bar: {
    defaultMessage: 'bar',
  },
})

Opciones

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/enforce-description': ['error', 'literal'],
    },
  },
]

La opción literal fuerza a que description sea siempre un literal de cadena en lugar de llamadas a funciones o variables. Esto ayuda a las herramientas de extracción que esperan description como literal.

`enforce-default-message`

Obliga a incluir defaultMessage en el descriptor del mensaje.

Por qué

Útil cuando se extraen mensajes del código fuente para traducción, asegurando que no se olvide el defaultMessage

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // WORKS
  foo: {
    defaultMessage: 'This is default message',
    description: 'bar',
  },
  // FAILS
  bar: {
    description: 'bar',
  },
})

Opciones

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/enforce-default-message': ['error', 'literal'],
    },
  },
]

La opción literal fuerza a que defaultMessage sea siempre un literal de cadena en lugar de llamadas a funciones o variables. Esto ayuda a las herramientas de extracción que esperan defaultMessage como literal.

`enforce-placeholders`

Verifica que todos los valores estén presentes si el mensaje tiene marcadores de posición (number/date/time/plural/select/selectordinal). Requiere que los valores se pasen como objetos literales (no como variables).

// WORKS, no error
<FormattedMessage
  defaultMessage="this is a {placeholder}"
  values={{placeholder: 'dog'}}
/>

// WORKS, no error
intl.formatMessage({
  defaultMessage: 'this is a {placeholder}'
}, {placeholder: 'dog'})

// WORKS, error bc no values were provided
<FormattedMessage
  defaultMessage="this is a {placeholder}"
/>

// WORKS, error bc no values were provided
intl.formatMessage({
  defaultMessage: 'this is a {placeholder}'
})

// WORKS, error bc `placeholder` is not passed in
<FormattedMessage
  defaultMessage="this is a {placeholder}"
  values={{foo: 1}}
/>

// WORKS, error bc `placeholder` is not passed in
intl.formatMessage({
  defaultMessage: 'this is a {placeholder}'
}, {foo: 1})

// DOESN'T WORK
<FormattedMessage
  defaultMessage="this is a {placeholder}"
  values={someVar}
/>

// DOESN'T WORK
intl.formatMessage({
  defaultMessage: 'this is a {placeholder}'
}, values)

Opciones

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/enforce-placeholders': [
        'error',
        {
          ignoreList: ['foo'],
        },
      ],
    },
  },
]

ignoreList: Lista de nombres de marcadores a ignorar. Funciona con defaultRichTextElements en react-intl para evitar falsos positivos en formato de etiquetas globales

`enforce-plural-rules`

Obliga a especificar o prohibir ciertas reglas de plural en un mensaje.

Por qué

Se recomienda especificar siempre other como alternativa en el mensaje.
Algunos proveedores de traducción solo aceptan ciertas reglas.

Reglas disponibles

enum LDML {
  zero = 'zero',
  one = 'one',
  two = 'two',
  few = 'few',
  many = 'many',
  other = 'other',
}

Ejemplo

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/enforce-plural-rules': [
        2,
        {
          one: true,
          other: true,
          zero: false,
        },
      ],
    },
  },
]

`no-camel-case`

Garantiza que los placeholders no usen camelCase.

Por qué

Previene problemas de sensibilidad a mayúsculas/minúsculas en ciertos proveedores de traducción.

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // WORKS
  foo: {
    defaultMessage: 'foo {snake_case} {nothing}',
  },
  // FAILS
  bar: {
    defaultMessage: 'foo {camelCase}',
  },
})

`no-missing-icu-plural-one-placeholders`

Mensajes como {thing, plural, one {1 thing} other {# things}} deben cambiarse a {thing, plural, one {# thing} other {# things}}

Por qué

"one" es una categoría para números que se comportan como 1. En algunos idiomas como ucraniano, ruso y polaco, "one" aplica a números que terminan en 1 (ej. 1, 21, 151) pero no en 11 (ej. 11, 111). Más información

`no-emoji`

Evita el uso de emojis (o por encima de cierta versión de Unicode) en mensajes

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-emoji': ['error'],
    },
  },

  // OR
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-emoji': ['error', {versionAbove: '12.0'}],
    },
  },
]

Por qué

Algunos proveedores de traducción no pueden manejar emojis.
La codificación multiplataforma de emojis es problemática.

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // WORKS
  foo: {
    defaultMessage: 'Smileys & People',
  },
  // WORKS with option {versionAbove: '12.0'}
  foo_bar: {
    defaultMessage: '😃 Smileys & People',
  },
  // FAILS
  bar: {
    defaultMessage: '😃 Smileys & People',
  },
  // FAILS with option {versionAbove: '12.0'}
  bar_foo: {
    defaultMessage: '🥹 Smileys & People',
  },
})

`no-literal-string-in-jsx`

Evita cadenas no traducidas en JSX.

Por qué

Es fácil olvidar envolver texto JSX en funciones o componentes de traducción.
Es fácil olvidar envolver atributos de accesibilidad (ej. aria-label) en funciones de traducción.

// WORKS
<Button>
  <FormattedMessage defaultMessage="Submit" />
</Button>
// WORKS
<Button>
  {customTranslateFn("Submit")}
</Button>
// WORKS
<input aria-label={intl.formatMessage({defaultMessage: "Label"})} />
// WORKS
<img
  src="/example.png"
  alt={intl.formatMessage({defaultMessage: "Image description"})}
/>
// FAILS
<Button>Submit</Button>
// FAILS
<Button>{'Submit'}</Button>
// FAILS
<Button>{`Te` + 's' + t}</Button>
// FAILS
<input aria-label="Untranslated label" />
// FAILS
<img src="/example.png" alt="Image description" />
// FAILS
<input aria-label={`Untranslated label`} />

Este linter reporta literales de texto o expresiones de cadena, incluyendo concatenaciones en hijos JSX. También verifica atributos JSX personalizables.

Ejemplo

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-literal-string-in-jsx': [
        2,
        {
          // Include or exclude additional prop checks (merged with the default checks)
          props: {
            include: [
              // picomatch style glob pattern for tag name and prop name.
              // check `name` prop of `UI.Button` tag.
              ['UI.Button', 'name'],
              // check `message` of any component.
              ['*', 'message'],
            ],
            // Exclude will always override include.
            exclude: [
              // do not check `message` of the `Foo` tag.
              ['Foo', 'message'],
              // do not check aria-label and aria-description of `Bar` tag.
              ['Bar', 'aria-{label,description}'],
            ],
          },
        },
      ],
    },
  },
]

Las comprobaciones de props predeterminadas son:

{
  include: [
    // check aria attributes that the screen reader announces.
    ['*', 'aria-{label,description,details,errormessage}'],
    // check placeholder and title attribute of all native DOM elements.
    ['[a-z]*([a-z0-9])', '(placeholder|title)'],
    // check alt attribute of the img tag.
    ['img', 'alt'],
  ],
  exclude: []
}

`no-literal-string-in-object`

Evita cadenas no traducidas en propiedades de objeto seleccionadas.

Por qué

Es fácil olvidar envolver cadenas literales en funciones de traducción cuando se definen en campos de objeto como {label: "Untranslated label"}.

const options = () => [
  // FAILS
  {value: 'chocolate', label: 'Chocolate'},
  // WORKS
  {
    value: 'strawberry',
    label: intl.formatMessage({defaultMessage: 'Strawberry'}),
  },
  // WORKS, custom translation function
  {
    value: 'mint',
    label: customTranslateFn('Mint'),
  },
  // FAILS, string concatenation
  {
    value: 'coconut',
    label: 'Coconut' + intl.formatMessage({defaultMessage: 'Ice Cream'}),
  },
  // FAILS, template literal
  {
    value: 'mango',
    label: `Mango ${intl.formatMessage({defaultMessage: 'Ice Cream'})}`,
  },
  // FAILS, conditional rendering
  {
    value: 'recommended',
    label: feelLikeSour
      ? intl.formatMessage({defaultMessage: 'Lime'})
      : 'Vanilla',
  },
]

const MyComponent = () => <Select options={options()} />

Este linter reporta literales de texto o expresiones de cadena en propiedades de objeto personalizables.

Ejemplo

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-literal-string-in-object': [
        'warn',
        {
          // The object properties to check for untranslated literal strings, default: ['label']
          include: ['label'],
        },
      ],
    },
  },
]

`no-multiple-whitespaces`

Evita múltiples espacios consecutivos en mensajes.

Por qué

Los espacios consecutivos se manejan diferente en distintos idiomas.
Previene saltos de línea \ en cadenas JS que generan espacios incómodos.

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // WORKS
  foo: {
    defaultMessage: 'Smileys & People',
  },
  // FAILS
  bar: {
    defaultMessage: 'Smileys &   People',
  },
  // FAILS
  baz: {
    defaultMessage:
      'this message is too long \
    so I wanna line break it.',
  },
})

`no-multiple-plurals`

Evita múltiples plurales en un mensaje.

Por qué

Los plurales anidados son difíciles de traducir entre idiomas y algunos proveedores los prohíben.

import {defineMessages} from 'react-intl'

const messages = defineMessages({
    // WORKS
    foo: {
        defaultMessage: '{p1, plural, one{one}}',
    },
    // FAILS
    bar: {
        defaultMessage: '{p1, plural, one{one}} {p2, plural, one{two}}',
    }
    // ALSO FAILS
    bar2: {
        defaultMessage: '{p1, plural, one{{p2, plural, one{two}}}}',
    }
})

`no-offset`

Evita especificar offset en reglas plurales.

Por qué

El offset tiene implicaciones lógicas complejas y algunos proveedores lo prohíben.

import {defineMessages} from 'react-intl'

const messages = defineMessages({
  // PASS
  foo: {
    defaultMessage: '{var, plural, one{one} other{other}}',
  },
  // FAILS
  bar: {
    defaultMessage: '{var, plural, offset:1 one{one} other{other}}',
  },
})

`enforce-id`

Exige que se establezca un ID generado en MessageDescriptor.

Por qué

Las canalizaciones pueden imponer la generación automática/manual de IDs a nivel de linter (autocorrección para insertar ID generado automáticamente) garantizando esto.

import {defineMessages} from 'react-intl';

const messages = defineMessages({
  // PASS
  foo: {
    id: '19shaf'
    defaultMessage: '{var, plural, one{one} other{other}}',
  },
  // FAILS
  bar: {
    id: 'something',
    defaultMessage: '{var, plural, offset:1 one{one} other{other}}',
  },
  // FAILS
  bar: {
    defaultMessage: '{var, plural, offset:1 one{one} other{other}}',
  },
});

Opciones

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/enforce-id': [
        'error',
        {
          idInterpolationPattern: '[sha512:contenthash:base64:6]',
        },
      ],
    },
  },
]

idInterpolationPattern: Patrón para verificar el ID
idWhitelist: Array de strings con expresiones regulares. Permite permitir IDs personalizados para mensajes. Ej: '\\.' permite IDs con punto; '^payment_.*' permite IDs con prefijo payment_. Nota: las barras invertidas \ en strings deben escaparse con una barra invertida adicional.

`no-invalid-icu`

Bloquea strings dentro de defaultMessage con sintaxis ICU inválida.

Por qué

Es común pasar por alto strings que parecen correctos pero tienen sintaxis ICU inválida. Ejemplo que provocaría error:

formatMessage(
  {
    defaultMessage: '{count, plural one {#} other {# more}}', //Missing a comma!
  },
  {
    count: 1,
  }
)

`no-id`

Bloquea IDs explícitos en MessageDescriptor.

Por qué

Recomendamos generación automática de IDs por estas razones. Esto asegura que no se establezcan IDs explícitos.

`no-complex-selectors`

Evita oraciones excesivamente complejas. La complejidad se determina por la cantidad de strings generados al aplanar la oración con sus selectores. Ejemplo:

I have {count, plural, one{a dog} other{many dogs}}

tiene complejidad 2 porque al aplanar el selector plural produce 2 oraciones: I have a dog e I have many dogs. El límite predeterminado es 20 (referencia: Smartling)

Opciones

import formatjs from 'eslint-plugin-formatjs'

export default [
  {
    plugins: {
      formatjs,
    },
    rules: {
      'formatjs/no-complex-selectors': [
        'error',
        {
          limit: 3,
        },
      ],
    },
  },
]

`no-useless-message`

Bloquea mensajes que no requieren traducción.

Por qué

Mensajes como {test} no son procesables por traductores. El código debería referenciar test directamente.

`prefer-formatted-message`

Usa <FormattedMessage> en lugar del imperativo intl.formatMessage(...) cuando sea aplicable.

// Bad
<p>
  {intl.formatMessage({defaultMessage: 'hello'})}
</p>

// Good
<p>
  <FormattedMessage defaultMessage="hello" />
</p>

Por qué

Estilo de código consistente en JSX y menos desorden sintáctico.

`prefer-pound-in-plural`

Usa # en argumentos plurales para referenciar el conteo en lugar de repetir el argumento.

// Bad
I have {count} {
  count, plural,
    one {apple}
    other {apples}
  }
}
// Good
I have {
  count, plural,
    one {# apple}
    other {# apples}
  }
}

// Bad
I have {
  count, plural,
    one {{count} apple}
    other {{count} apples}
  }
}
// Good
I have {
  count, plural,
    one {# apple}
    other {# apples}
  }
}

// Bad
I won the {ranking}{
  count, selectordinal,
    one {st}
    two {nd}
    few {rd}
    other {th}
} place.
// Good
I won the {ranking}{
  count, selectordinal,
    one {#st}
    two {#nd}
    few {#rd}
    other {#th}
} place.

Por qué

Mensajes más concisos.
Garantiza que los conteos se formateen correctamente como números.

Uso​

React​

Vue​

Configuraciones compartidas​

formatjs.additionalFunctionNames​

formatjs.additionalComponentNames​

Configuraciones predefinidas​

Ejemplo​

Reglas disponibles​

blocklist-elements​

Por qué​

Elementos disponibles​

Ejemplo​

enforce-description​

Por qué​

Opciones​

enforce-default-message​

Por qué​

Opciones​

enforce-placeholders​

Opciones​

enforce-plural-rules​

Por qué​

Reglas disponibles​

Ejemplo​

no-camel-case​

Por qué​

no-missing-icu-plural-one-placeholders​

Por qué​

no-emoji​

Por qué​

no-literal-string-in-jsx​

Por qué​

Ejemplo​

no-literal-string-in-object​

Por qué​

Ejemplo​

no-multiple-whitespaces​

Por qué​

no-multiple-plurals​

Por qué​

no-offset​

Por qué​

enforce-id​

Por qué​

Opciones​

no-invalid-icu​

Por qué​

no-id​

Por qué​

no-complex-selectors​

Opciones​

no-useless-message​

Por qué​

prefer-formatted-message​

Por qué​

prefer-pound-in-plural​

Por qué​

Uso

React

Vue

Configuraciones compartidas

`formatjs.additionalFunctionNames`

`formatjs.additionalComponentNames`

Configuraciones predefinidas

Ejemplo

Reglas disponibles

`blocklist-elements`

Por qué

Elementos disponibles

Ejemplo

`enforce-description`

Por qué

Opciones

`enforce-default-message`

Por qué

Opciones

`enforce-placeholders`

Opciones

`enforce-plural-rules`

Por qué

Reglas disponibles

Ejemplo

`no-camel-case`

Por qué

`no-missing-icu-plural-one-placeholders`

Por qué

`no-emoji`

Por qué

`no-literal-string-in-jsx`

Por qué

Ejemplo

`no-literal-string-in-object`

Por qué

Ejemplo

`no-multiple-whitespaces`

Por qué

`no-multiple-plurals`

Por qué

`no-offset`

Por qué

`enforce-id`

Por qué

Opciones

`no-invalid-icu`

Por qué

`no-id`

Por qué

`no-complex-selectors`

Opciones

`no-useless-message`

Por qué

`prefer-formatted-message`

Por qué

`prefer-pound-in-plural`

Por qué