jsx-eslint/eslint-plugin-react

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

Open

#2501 opened on Nov 21, 2019

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

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

Tech stack
javascriptreact
Domain
frontendtooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Knowledge of ESLint rule structureUnderstanding of React JSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
First, locate the rule implementation in eslint plugin react (likely in lib/rules/jsx one expression per line.js). Study how the rule currently works and how options are parsed. The feature request asks for an `exceptTags` option to ignore specified tags. Implement the option by checking the JSX element's tag name in the rule logic. Ensure the option is documented. Consider existing similar options in other rules as a pattern.