jsx-one-expression-per-line
Require one JSX element per line.
Note: The fixer will insert line breaks between any expression that are on the same line.
Rule Details
Examples of incorrect code for this rule:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: "error" */
<App><Hello /></App>;
<App><Hello />
</App>;
<App>
<Hello>
</Hello></App>;
<App>
<Hello /> World
</App>;
<App>
<Hello /> { 'World' }
</App>;
<App>
<Hello /> { this.world() }
</App>;
<App>
{ 'Hello' }{ ' ' }{ 'World' }
</App>;
<App
foo
><Hello />
</App>;
<App><Hello
foo
/>
</App>;
<App><Hello1 />
<Hello2 />
<Hello3 />
</App>;
Examples of correct code for this rule:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: "error" */
<App>
<Hello />
</App>;
<App>
<Hello>
</Hello>
</App>;
<App>
<Hello />
World
</App>;
<App>
<Hello />
{ 'World' }
</App>;
<App>
<Hello />
{ this.world() }
</App>;
<App>
{ 'Hello' }
{ ' ' }
{ 'World' }
</App>;
<App
foo
>
<Hello />
</App>;
<App>
<Hello
foo
/>
</App>;
<App>
<Hello1 />
<Hello2 />
<Hello3 />
</App>;
correct
incorrect
Rule Options
js
...
"@stylistic/jsx-one-expression-per-line": [<enabled>, { "allow": "none"|"literal"|"single-child"|"non-jsx" }]
...
allow
Defaults to none
.
Examples of correct code for this rule, when configured as "literal"
:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: ["error", { "allow": "literal" }] */
<App>Hello</App>
correct
Examples of correct code for this rule, when configured as "single-child"
:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: ["error", { "allow": "single-child" }] */
<App>Hello</App>;
<App>{"Hello"}</App>;
<App><Hello /></App>;
correct
Examples of correct code for this rule, when configured as "single-line"
:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: ["error", { "allow": "single-line" }] */
<App>Hello <span>ESLint</span></App>;
<App>{"Hello"} {"ESLint"}</App>;
<App>
<Hello /> <ESLint />
</App>;
correct
Examples of correct code for this rule, when configured as "non-jsx"
:
jsx
/* eslint @stylistic/jsx-one-expression-per-line: ["error", { "allow": "non-jsx" }] */
<App>Hello {someVariable}</App>;
<App>Hello {<Hello />} there!</App>;
<App>
Hello
<Hello />
there!
</App>;
correct