Skip to content

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

Released under the MIT License.