🔧 This rule is automatically fixable by the --fix
CLI option.
This is a stylistic rule intended to make JSX code more readable by requiring or preventing lines between adjacent JSX elements and expressions.
...
"react/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
...
- enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
- prevent: optional boolean. If
true
prevents empty lines between adjacent JSX elements and expressions. Defaults tofalse
. - allowMultilines: optional boolean. If
true
andprevent
is also equal totrue
, it allows newlines after multiline JSX elements and expressions. Defaults tofalse
.
Examples of incorrect code for this rule, when configured with { "prevent": false }
:
<div>
<Button>{data.label}</Button>
<List />
</div>
<div>
<Button>{data.label}</Button>
{showSomething === true && <Something />}
</div>
<div>
{showSomething === true && <Something />}
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
Examples of correct code for this rule, when configured with { "prevent": false }
:
<div>
<Button>{data.label}</Button>
<List />
<Button>
<IconPreview />
Button 2
<span></span>
</Button>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
Examples of incorrect code for this rule, when configured with { "prevent": true }
:
<div>
<Button>{data.label}</Button>
<List />
<Button>
<IconPreview />
Button 2
<span></span>
</Button>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
Examples of correct code for this rule, when configured with { "prevent": true }
:
<div>
<Button>{data.label}</Button>
<List />
</div>
<div>
<Button>{data.label}</Button>
{showSomething === true && <Something />}
</div>
<div>
{showSomething === true && <Something />}
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
Examples of incorrect code for this rule, when configured with { "prevent": true, "allowMultilines": true }
:
<div>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
Examples of correct code for this rule, when configured with { "prevent": true, "allowMultilines": true }
:
<div>
{showSomething === true && <Something />}
<Button>Button 3</Button>
{showSomethingElse === true ? (
<SomethingElse />
) : (
<ErrorMessage />
)}
</div>
You can turn this rule off if you are not concerned with spacing between your JSX elements and expressions.