jsx-eslint/eslint-plugin-react

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

Open

#3.288 aberto em 11 de mai. de 2022

Ver no GitHub
 (4 comments) (1 reaction) (0 assignees)JavaScript (2.797 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (8.630 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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

Guia do colaborador

Direção de pesquisa
Reproduza o conflito de indentação com fragmentos JSX dentro de expressões ternárias. Examine o código fonte da regra `react/jsx indent`, particularmente como ela lida com fragmentos e operadores ternários. Procure por casos extremos onde a indentação da tag de fechamento conflita com as expectativas de indentação do fragmento.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
JavaScriptReactESLint
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65