jsx-eslint/eslint-plugin-react

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

Open

#454 aperta il 18 feb 2016

Vedi su GitHub
 (29 commenti) (16 reazioni) (0 assegnatari)JavaScript (2797 fork)batch import
help wanted

Metriche repository

Star
 (8630 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Esamina il codice della regola jsx indent per capire come calcola il rientro per JSX all'interno di espressioni ternarie. Concentrati sulla logica che gestisce più righe ed elementi JSX annidati. Valuta se la regola dovrebbe trattare il tag di apertura come parte dell'espressione ternaria o come un nuovo blocco.
Tech stack
javascriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ESLintReact
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65