`jsx-one-expression-per-line`

1 行ごとに 1 つの JSX 要素を必須にします。

注意: フィクサーは、同じ行にある式間に改行を挿入します。

ルールの詳細

このルールに対する不適切なコードの例

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>

このルールに対する適切なコードの例

jsx

<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>

ルールのオプション

...
"@stylistic/jsx/jsx-one-expression-per-line": [<enabled>, { "allow": "none"|"literal"|"single-child"|"non-jsx" }]
...

`allow`

デフォルトは none です。

"literal" として設定した場合の、このルールに対する適切なコードの例

jsx

<App>Hello</App>

"single-child" として設定した場合の、このルールに対する適切なコードの例

jsx

<App>Hello</App>

<App>{"Hello"}</App>

<App><Hello /></App>

"single-line" として設定した場合の、このルールに対する適切なコードの例

jsx

<App>Hello <span>ESLint</span></App>

<App>{"Hello"} {"ESLint"}</App>

<App>
  <Hello /> <ESLint />
</App>

"non-jsx" として設定した場合の、このルールに対する適切なコードの例

jsx

<App>Hello {someVariable}</App>

<App>Hello {<Hello />} there!</App>

<App>
  Hello
  <Hello />
  there!
</App>

適切

不適切