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 GitHubContributor guide
 (29 comments) (16 reactions) (0 assignees)JavaScript (2,731 forks)batch import
help wanted

Repository metrics

Stars
 (9,293 stars)
PR merge metrics
 (PR metrics pending)

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

Research direction
Examine the jsx indent rule code to understand how it calculates indentation for JSX inside ternary expressions. Focus on the logic that handles multiple lines and nested JSX elements. Consider if the rule should treat the opening tag as part of the ternary expression or as a new block.
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
ESLintReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65