@stylistic/jsx/

jsx-child-element-spacing

JSX属性および式内の波かっこ内のスペースを強制または許可しない

ルールの詳細

Reactは可能であれば要素間の不要な改行を削除するため、それらの間にスペースがない状態でレンダリングされるインライン要素が生成される可能性があります。これは一般的にエラーを示しており、このルールは曖昧なスペースのあるJSXマークアップを検出することを試みます。

このルールに対する誤っているコードの例

<div>
  Here is a
  <a>link</a>
</div>

<div>
  <b>This text</b>
  is bold
</div>

このルールに対する正しいコードの例

<div>
  Spacing is
  {' '}
  <a>explicit</a>
</div>

<div>
  Lack of spacing is{/*
  */}<a>explicit</a>
</div>

使用しない場合

インライン要素がテキストの隣に表示されても問題がない場合、またはスペースを示すために要素間に常に{' '}を明示的に含める場合は、このルールをオフにすることができます。