jsx-indent rule doesn't properly validate ternary (?:) expressions with no parens · jsx-eslint/eslint-plugin-react#1315

(6 comments) (6 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import

bughelp wanted

Description

Prior related issues:

https://github.com/yannickcr/eslint-plugin-react/issues/540 https://github.com/yannickcr/eslint-plugin-react/issues/625

Patterns:

{ condition
  ? <div>
      <div> something </div>
    </div>
  : <div>
      <div> something </div>
    </div>
}

{ condition
    ? <div>
        <div> something </div>
      </div>
    : <div>
        <div> something </div>
      </div>
}

{
  condition
  ? <div>
      <div> something </div>
    </div>
  : <div>
      <div> something </div>
    </div>
}

{
  condition
    ? <div>
        <div> something </div>
      </div>
    : <div>
        <div> something </div>
      </div>
}

Expected behavior: All of these patterns properly validate and flag no errors.

Actual behavior: All of these patterns flag errors for lines following and indented after the ternary result clauses (after ? and : lines).

Contributor guide

Tech stack: javascriptreact
Domain: developer experiencetooling
Issue type: bug
Difficulty: 3
Estimated time: 1-3 hours
Activity status: stale
Clarity: clear
Prerequisites: JavaScriptESLint rule developmentReact JSX
Newbie friendliness: 60
Research direction: Examine the jsx indent rule implementation in eslint plugin react, likely in lib/rules/jsx indent.js. Review prior issues #540 and #625 for context on ternary handling. Look at the test suite for ternary cases to understand expected behavior and see if there are any recent changes to the rule.