expandSingleLineJsx

Convert single-line JSX components with multiple props to multi-line format

Convert single-line JSX components with multiple props to multi-line format. Also respects ignoreComponents from formatMultiLineJsx.

Disabled by default. This rule is disabled by default due to a known issue where inline JSX content can be lost during expansion. It will be enabled by default once the bug is resolved.

Options

Config

{
  "expandSingleLineJsx": {
    "enabled": true,
    "propsThreshold": 3
  }
}

Examples

Default threshold (2 props)

With enabled: true and propsThreshold: 2:

Before:

<Component prop1="value1" prop2="value2" />

After:

<Component
  prop1="value1"
  prop2="value2" />

Higher threshold

With propsThreshold: 3, a component with only 2 props stays on one line:

Before:

<Component prop1="value1" prop2="value2" />

After (unchanged — only 2 props, threshold is 3):

<Component prop1="value1" prop2="value2" />

But a component with 3 or more props gets expanded:

Before:

<ExImg src="/photo.jpg" alt="Photo" className="rounded" />

After:

<ExImg
  src="/photo.jpg"
  alt="Photo"
  className="rounded" />

Single prop (never expanded)

Components with a single prop are never expanded regardless of settings:

<Component prop1="value1" />

This stays as-is.