react/jsx-first-prop-new-line

Enforce the position of the first prop of a JSX element

fixable

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:

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

Every option, set to its default:

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

Examples#

example.jsx1 problem
const field = (
  <Input name="email"
    value={email}
  />
);
example.jsxNo problems
const field = (
  <Input
    name="email"
    value={email}
  />
);

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

Options#

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

example.jsxwith "multiline"1 problem
const box = <Box style={{
  color: "red",
}} />;
example.jsxNo problems
const box = <Box style={{
  color: "red",
}} />;

With "multiprop":

example.jsxwith "multiprop"1 problem
const field = <Input name="email" value={email} />;

With "never":

example.jsxwith "never"1 problem
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.