jsx-eslint/eslint-plugin-react

jsx-indent rule with ternary operators on multiple lines and JSX elements

Open

#454 opened on Feb 18, 2016

View on GitHub
 (29 comments) (16 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
help wanted

Description

This code

const foo = bar
    ? (
        <p>
            {'Bar is true!'}
        </p>
    )
    : (
        <p>
            {'Bar is false!'}
        </p>
    );

violates the jsx-indent rule on the lines with the <p> opening tags, saying that everything should be brought one level back.

I use a lot this syntax, especially when I have to render one complex component or another according to a boolean variable, and I can't seem to find a workaround to avoid the linting error (apart from not using the ternary operator, which I don't like).

Contributor guide

Tech stack
javascriptreact
Domain
frontenddeveloper experiencetooling
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.
3-5 days
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.
clear
Prerequisites
Familiarity with ESLint plugin developmentUnderstanding of JSX syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Examine the implementation of the `jsx indent` rule in eslint plugin react, focusing on how it handles ternary expressions with JSX across multiple lines. Review the issue comments for proposed solutions and any linked PRs. Consider the ESLint core `indent` rule's behavior for comparison. The fix may involve adjusting the indentation calculation for parenthesized ternary expressions containing JSX.
jsx-indent rule with ternary operators on multiple lines and JSX elements · jsx-eslint/eslint-plugin-react#454 | Good First Issue