jsx-eslint/eslint-plugin-react

How to prevent jsx-newline for elements and expressions on one line?

Open

#3.296 geöffnet am 23. Mai 2022

Auf GitHub ansehen
 (9 Kommentare) (2 Reaktionen) (0 zugewiesene Personen)JavaScript (8.630 Stars) (2.797 Forks)batch import
help wanted

Beschreibung

I have jsx-newline enabled, but how can I allow these cases where I want everything to stay on the same line? Without adding {/* eslint-disable[-line] react/jsx-newline */} around it?

<p>
  {t('text')} <span>{email}</span>
</p>

or

<div>
  {activeStep}/{steps}
</div>

It would be nice if there would be a setting that allowed for cases where everything is on the same line. So:

// BAD
<p>
  {t('text')} 
  <span>{email}</span>
</p>

// BOTH GOOD
<p>
  {t('text')} <span>{email}</span>
</p>

<p>
  {t('text')} 

  <span>{email}</span>
</p>

Contributor Guide

Tech Stack
javascriptreact
Domain
toolingfrontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 days
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
ESLint rule developmentJSX syntax
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60
Research-Richtung
Review the current implementation of the jsx newline rule in eslint plugin react. Examine the issue comments for discussion on desired behavior and potential solutions. Consider adding a new option like 'allowSingleLine' to permit inline elements without newlines. Update tests and documentation accordingly.