jsx-eslint/eslint-plugin-react

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

Open

#3 296 ouverte le 23 mai 2022

Voir sur GitHub
 (9 commentaires) (2 réactions) (0 assignés)JavaScript (8 630 stars) (2 797 forks)batch import
help wanted

Description

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>

Guide contributeur

Stack technique
javascriptreact
Domaine
toolingfrontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 days
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
mostly clear
Prérequis
ESLint rule developmentJSX syntax
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60
Direction de recherche
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.