jsx-eslint/eslint-plugin-react

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

Open

#3288 opened on May 11, 2022

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

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

Tech stack
javascriptreact
Domain
frontenddeveloper experience
Issue type
bug
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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
understanding of ESLint pluginsJSX indentation basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Review the 'jsx indent' rule implementation in eslint plugin react (likely in lib/rules/jsx indent.js). Reproduce the issue using the provided code snippet. Examine how the rule handles ternary expressions with fragments, particularly the indentation calculation for opening/closing tags. Investigate the auto fix loop described: closing tag indentation triggers a conflict. Check existing comments for any maintainer guidance or workarounds. Consider contributing a fix that aligns indentation expectations for nested fragments within ternary operators, potentially referencing ESLint's core indent rule logic.