jsx-eslint/eslint-plugin-react

[Feature] react/jsx-one-expression-per-line tag filtering

Open

#2,501 opened on Nov 21, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (2,797 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (8,630 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

const enabled = condition => (condition ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>)

// Current aspect with rule activated
return (
  <Trans>
    <b>Charges</b>
    {' '}
    are
    {' '}
    {enabled(canCharge)}
    {' '}
    and
    {' '}
    <b>payout</b>
    {' '}
    are
    {' '}
    {enabled(payoutsEnabled)}
  </Trans>
)
// Viewed by translating engine
// '<0>Charges</0>{0}are{1}{2}{3}and{4}<1>payout</1>{5}are{6}{7}'

// Desired aspect
return (
  <Trans>
    <b>Charges</b> are {enabled(canCharge)} and <b>payout</b> are {enabled(payoutsEnabled)}
  </Trans>
)
// Viewed by translating engine
// '<0>Charges</0> are {0} and <1>payout</1> are {1}'

In this case it's very annoying to have this all new line for text formatting and it will be interpreted as variable by my translating engine.

So a tag filtering would be great like this:

"react/jsx-one-expression-per-line": ["error", { "exceptTags": ["Trans", "p", "span", "b"] }]

Contributor guide