react/jsx-first-prop-new-line

When a tag takes several lines and its first prop stays next to the tag name, that prop is easy to miss and the props don't line up. By default the rule reports this for a tag that has more than one prop.

--fix moves the first prop.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-first-prop-new-line" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
# "always", "never", "multiline", "multiline-multiprop" or "multiprop"
"react/jsx-first-prop-new-line" = ["error", "multiline-multiprop"]

Examples

Reported:

const field = (
  <Input name="email"
    value={email}
  />
);

Not reported:

const field = (
  <Input
    name="email"
    value={email}
  />
);

const short = <Input name="email" value={email} />;

Options

Option	The first prop goes on a new line
"multiline-multiprop" (default)	If the tag takes several lines and has more than one prop.
"multiline"	If the tag takes several lines.
"multiprop"	If the tag has more than one prop. With one prop, it must be on the same line as the tag name.
"always"	Always.
"never"	Never. It must be on the same line as the tag name.

A single prop that takes several lines is reported with "multiline", but not with the default:

const box = <Box style={{
  color: "red",
}} />;

const box = <Box style={{
  color: "red",
}} />;

With "multiprop":

const field = <Input name="email" value={email} />;

With "never":

const field = (
  <Input
    name="email"
    value={email}
  />
);

When not to use it

A formatter such as bun fmt or Prettier already decides where the first prop goes.