eslint-plugin-formatjs

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Questo plugin ESLint permette di applicare regole specifiche ai tuoi messaggi ICU.

Utilizzo

npm
yarn

npm i -D eslint-plugin-formatjs

yarn add -D eslint-plugin-formatjs

Quindi nella tua configurazione eslint:

import formatjs from 'eslint-plugin-formatjs'

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

React

Attualmente utilizza intl.formatMessage, defineMessage, defineMessages, <FormattedMessage> da react-intl come hook per verificare i messaggi. Pertanto, nel tuo codice utilizza uno dei seguenti meccanismi:

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 le chiamate alle funzioni intl.formatMessage e $formatMessage sia nei file JS/TS che negli SFC .vue. Ad esempio:

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

Impostazioni Condivise

Queste impostazioni si applicano globalmente a tutte le regole di FormatJS una volta specificate. Consulta Impostazioni Condivise per dettagli su come configurarle.

`formatjs.additionalFunctionNames`

Analogamente a babel-plugin-formatjs e @formatjs/ts-transformer, permette di specificare nomi aggiuntivi di funzioni da verificare oltre a formatMessage e $formatMessage.

`formatjs.additionalComponentNames`

Analogamente a babel-plugin-formatjs e @formatjs/ts-transformer, permette di specificare nomi aggiuntivi di componenti da verificare oltre a FormattedMessage.

Configurazioni Condivisibili

Il plugin fornisce due configurazioni predefinite:

recommended
strict

Utilizzandole, puoi semplificare la configurazione mantenendo regole coerenti con i tuoi standard di qualità.

Esempio

import formatjs from 'eslint-plugin-formatjs'

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

Regole Disponibili

`blocklist-elements`

Blocca l'utilizzo di elementi specifici nei messaggi ICU.

Perché

Alcuni servizi di traduzione non supportano elementi come selectordinal

Elementi disponibili

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',
}

Esempio

import formatjs from 'eslint-plugin-formatjs'

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

`enforce-description`

Impone la presenza di description nel descrittore del messaggio.

Perché

La descrizione fornisce contesto utile ai traduttori

import {defineMessages} from 'react-intl'

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

Opzioni

import formatjs from 'eslint-plugin-formatjs'

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

L'opzione literal forza description ad essere sempre un letterale stringa anziché chiamate a funzione o variabili. Utile per strumenti di estrazione che richiedono description come letterale.

`enforce-default-message`

Impone la presenza di defaultMessage nel descrittore del messaggio.

Perché

Utile per estrarre messaggi dal codice sorgente per traduzioni, assicurando che non venga dimenticato il defaultMessage

import {defineMessages} from 'react-intl'

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

Opzioni

import formatjs from 'eslint-plugin-formatjs'

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

L'opzione literal forza defaultMessage ad essere sempre un letterale stringa anziché chiamate a funzione o variabili. Utile per strumenti di estrazione che richiedono defaultMessage come letterale.

`enforce-placeholders`

Verifica che tutti i valori siano passati quando un messaggio contiene segnaposto (number/date/time/plural/select/selectordinal). Richiede valori passati come oggetto letterale (non variabile).

// 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)

Opzioni

import formatjs from 'eslint-plugin-formatjs'

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

ignoreList: Elenco di nomi di segnaposto da ignorare. Funziona con defaultRichTextElements in react-intl per evitare falsi positivi nella formattazione globale dei tag.

`enforce-plural-rules`

Impone che specifiche regole plurali siano sempre presenti o vietate in un messaggio.

Perché

Si consiglia di specificare sempre other come fallback nel messaggio.
Alcuni fornitori di traduzione accettano solo determinate regole.

Regole disponibili

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

Esempio

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`

Questo assicura che i segnaposto non utilizzino la notazione camel-case.

Perché

Previene problemi di case sensitivity con alcuni fornitori di traduzione.

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`

I messaggi come {thing, plural, one {1 thing} other {# things}} devono diventare {thing, plural, one {# thing} other {# things}}.

Perché

"one" è una categoria per numeri che si comportano come 1. In lingue come ucraino, russo e polacco, "one" si applica a numeri che terminano con 1 (es. 1, 21, 151) ma non con 11 (es. 11, 111). Maggiori informazioni

`no-emoji`

Impedisce l'uso di emoji (o caratteri Unicode superiori a una certa versione) nei messaggi.

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'}],
    },
  },
]

Perché

Alcuni fornitori di traduzione non gestiscono correttamente le emoji.
La codifica cross-platform delle emoji presenta problemi.

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`

Previene stringhe non tradotte in JSX.

Perché

È facile dimenticare di avvolgere il testo JSX in funzioni/componenti di traduzione.
È facile dimenticare di tradurre attributi di accessibilità come aria-label.

// 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`} />

Questo linter segnala stringhe letterali o espressioni di testo, incluse concatenazioni, nei figli JSX. Verifica anche attributi JSX personalizzabili.

Esempio

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}'],
            ],
          },
        },
      ],
    },
  },
]

I controlli predefiniti per le proprietà sono:

{
  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`

Previene stringhe non tradotte in proprietà selezionate degli oggetti.

Perché

È facile dimenticare di racchiudere le stringhe letterali nelle funzioni di traduzione, quando sono definite in un campo oggetto come {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()} />

Questo linter segnala stringhe letterali o espressioni di testo nelle proprietà oggetto personalizzabili.

Esempio

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`

Impedisce spazi multipli consecutivi nei messaggi.

Perché

Gli spazi consecutivi sono gestiti diversamente tra localizzazioni.
Previene interruzioni riga con \ che creano spaziature innaturali.

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`

Impedisce plurali multipli nello stesso messaggio.

Perché

I plurali annidati sono difficili da tradurre e alcuni fornitori li vietano.

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`

Impedisce l'uso di offset nelle regole plurali.

Perché

Gli offset hanno implicazioni logiche complesse vietate da alcuni fornitori.

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`

Impone l'impostazione dell'ID generato in MessageDescriptor.

Perché

Le pipeline possono imporre la generazione automatica o manuale degli ID a livello di linter (autofix per inserire ID autogenerati) garantendo così questo risultato.

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}}',
  },
});

Opzioni

import formatjs from 'eslint-plugin-formatjs'

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

idInterpolationPattern: Pattern per verificare l'ID
idWhitelist: Array di stringhe con espressioni regolari. Permette di creare una lista consentita di ID personalizzati per i messaggi. Ad esempio '\\.' consente qualsiasi ID contenente un punto; '^payment_.*' consente ID personalizzati con prefisso payment_. Attenzione: ogni backslash \ fornito tramite stringa deve essere preceduto da un ulteriore backslash per l'escape.

`no-invalid-icu`

Questa regola blocca stringhe all'interno di defaultMessage sintatticamente non valide.

Perché

È facile trascurare stringhe che sembrano corrette allo sviluppatore ma sono effettivamente non valide sintatticamente per ICU. Ad esempio, quanto segue genererebbe un errore eslint:

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

`no-id`

Questa regola vieta ID espliciti in MessageDescriptor.

Perché

Generalmente incoraggiamo la generazione automatica degli ID per questi motivi. Questa regola garantisce che non vengano impostati ID espliciti.

`no-complex-selectors`

Assicura che una frase non sia troppo complessa. La complessità è determinata dal numero di stringhe prodotte quando si tenta di appiattire la frase considerando i suoi selettori. Ad esempio:

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

ha complessità 2 perché l'appiattimento del selettore plurale produce 2 frasi: I have a dog & I have many dogs. Il limite predefinito di complessità è 20 (basato su riferimento Smartling)

Opzioni

import formatjs from 'eslint-plugin-formatjs'

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

`no-useless-message`

Questa regola blocca messaggi che non richiedono traduzione.

Perché

Messaggi come {test} non sono utilizzabili dai traduttori. Il codice dovrebbe riferirsi direttamente a test.

`prefer-formatted-message`

Utilizza <FormattedMessage> invece dell'imperativo intl.formatMessage(...) se applicabile.

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

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

Perché

Stile di codifica coerente in JSX e minor disordine sintattico.

`prefer-pound-in-plural`

Utilizza # nell'argomento plurale per riferirsi al conteggio invece di ripetere l'argomento.

// 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.

Perché

Messaggio più conciso.
Garantisce che i conteggi siano formattati correttamente come numeri.

Utilizzo​

React​

Vue​

Impostazioni Condivise​

formatjs.additionalFunctionNames​

formatjs.additionalComponentNames​

Configurazioni Condivisibili​

Esempio​

Regole Disponibili​

blocklist-elements​

Perché​

Elementi disponibili​

Esempio​

enforce-description​

Perché​

Opzioni​

enforce-default-message​

Perché​

Opzioni​

enforce-placeholders​

Opzioni​

enforce-plural-rules​

Perché​

Regole disponibili​

Esempio​

no-camel-case​

Perché​

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

Perché​

no-emoji​

Perché​

no-literal-string-in-jsx​

Perché​

Esempio​

no-literal-string-in-object​

Perché​

Esempio​

no-multiple-whitespaces​

Perché​

no-multiple-plurals​

Perché​

no-offset​

Perché​

enforce-id​

Perché​

Opzioni​

no-invalid-icu​

Perché​

no-id​

Perché​

no-complex-selectors​

Opzioni​

no-useless-message​

Perché​

prefer-formatted-message​

Perché​

prefer-pound-in-plural​

Perché​

Utilizzo

React

Vue

Impostazioni Condivise

`formatjs.additionalFunctionNames`

`formatjs.additionalComponentNames`

Configurazioni Condivisibili

Esempio

Regole Disponibili

`blocklist-elements`

Perché

Elementi disponibili

Esempio

`enforce-description`

Perché

Opzioni

`enforce-default-message`

Perché

Opzioni

`enforce-placeholders`

Opzioni

`enforce-plural-rules`

Perché

Regole disponibili

Esempio

`no-camel-case`

Perché

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

Perché

`no-emoji`

Perché

`no-literal-string-in-jsx`

Perché

Esempio

`no-literal-string-in-object`

Perché

Esempio

`no-multiple-whitespaces`

Perché

`no-multiple-plurals`

Perché

`no-offset`

Perché

`enforce-id`

Perché

Opzioni

`no-invalid-icu`

Perché

`no-id`

Perché

`no-complex-selectors`

Opzioni

`no-useless-message`

Perché

`prefer-formatted-message`

Perché

`prefer-pound-in-plural`

Perché