edvardchen/eslint-plugin-i18next

Clarify new version documentation

lexanth opened this issue · 2 comments

I've just upgraded to the new version - it's great!

I found the documentation of the new configuration a bit confusing, although it made more sense because I was familiar with the old config.

For selectors,

  • words controls plain text
  • jsx-components controls JSX elements
  • jsx-attributes controls JSX elements' attributes
  • callees controls function calls
  • object-properties controls objects' properties
  • class-properties controls classes' properties

From this, it wasn't clear that words controls the actual content of the literal string, whereas the others all control where they are used.

Maybe it would be clearer with examples?

  • words decides whether literal strings are allowed (in any situation), based on the content of the string
  • jsx-components decides whether literal strings as children within a component are allowed, based on the component name
    e.g. by default, Trans is excluded, so "Hello World" in the following is allowed.
<Trans i18nKey="greeting">Hello World</Trans>
  • jsx-attributes decides whether literal strings are allowed as JSX attribute values, based on the name of the attribute
    e.g. if data-testid is excluded, "important-button" in the following is allowed
<button data-testid="important-button" onClick={handleClick}>{t('importantButton.label')}</button>
  • callees decides whether literal strings are allowed as function arguments, based on the identifier of the function being called
    e.g. if window.open is excluded, "http://example.com" in the following is allowed
window.open('http://example.com')

callees also covers object constructors, such new Error('string') or new URL('string').

  • object-properties decides whether literal strings are allowed as object property values, based on the property key
    e.g. if fieldName is excluded but label is not, "currency_code" is allowed but "Currency" is not:
const fieldConfig = {
  fieldName: 'currency_code',
  label: 'Currency'
}

Vey helpful advice! I will improve it later

added it into the document