jsx-eslint/eslint-plugin-react

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

Open

#3296 opened on May 23, 2022

View on GitHub
 (9 comments) (2 reactions) (0 assignees)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>

Contributor guide

Tech stack
javascriptreact
Domain
toolingfrontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ESLint rule developmentJSX syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
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.