jsx-eslint/eslint-plugin-react

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

Open

#3 288 ouverte le 11 mai 2022

Voir sur GitHub
 (4 commentaires) (1 réaction) (0 assignés)JavaScript (2 797 forks)batch import
bughelp wanted

Métriques du dépôt

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

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

Guide contributeur

Direction de recherche
Reproduisez le conflit d'indentation avec les fragments JSX dans des expressions ternaires. Examinez le code source de la regle `react/jsx indent`, en particulier comment elle gere les fragments et les operateurs ternaires. Recherchez les cas limites ou l'indentation de la balise fermante est en conflit avec les attentes d'indentation du fragment.
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
JavaScriptReactESLint
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65