jsx-eslint/eslint-plugin-react

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

Open

#454 ouverte le 18 févr. 2016

Voir sur GitHub
 (29 commentaires) (16 réactions) (0 assignés)JavaScript (2 797 forks)batch import
help wanted

Métriques du dépôt

Stars
 (8 630 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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).

Guide contributeur

Direction de recherche
Examinez le code de la règle jsx indent pour comprendre comment il calcule l'indentation pour JSX à l'intérieur d'expressions ternaires. Concentrez vous sur la logique qui gère plusieurs lignes et éléments JSX imbriqués. Considérez si la règle doit traiter la balise ouvrante comme faisant partie de l'expression ternaire ou comme un nouveau bloc.
Stack technique
javascriptreact
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ESLintReact
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65