jsx-eslint/eslint-plugin-react

react/jsx-indent with ternary and react fragment DON'T play nice 😕

Open

#3,288 opened on May 11, 2022

View on GitHub
 (4 comments) (1 reaction) (0 assignees)JavaScript (2,797 forks)batch import
bughelp wanted

Repository metrics

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

Description

Conflicting rules in jsx-intend -->

{buttons
  .map((b, i) => (i === 2)
    ? <>
        <ThemedView/>
        <ImageButton/>
      </>
    : <ImageButton/>
)}

Tells me Expected indentation of 12 space characters but found 14 (for line 4+5) AND Expected indentation of 10 space characters but found 12 (line 6)

But:

  1. 4+5 SHOULD be indented (and is normally just fine, even with fragment, when not in combination with ternary operator) --> I don't care about that, I can just bring them in line with opening fragment then it work, just wanted to mention
  2. if I bring the react-fragment closing tag (line 6) to 10 spaces, it says Expected closing tag to match indentation of opening which it's auto-fix is to bring it in line with opening fragment (10->12), which just loops the error! --> conflicting rule in this case

Contributor guide

Research direction
Reproduce the indentation conflict with JSX fragments inside ternary expressions. Examine the source code of the `react/jsx indent` rule, particularly how it handles fragments and ternary operators. Look for edge cases where closing tag indentation conflicts with fragment indentation expectations.
Tech stack
javascriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptReactESLint
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65