jsx-first-prop-new-line.md

Enforce proper position of the first property in JSX (react/jsx-first-prop-new-line)

🔧 This rule is automatically fixable by the --fix CLI option.

Ensure correct position of the first property.

Note: The fixer does not include indentation. Please rerun lint to correct those errors.

Rule Details

This rule checks whether the first property of all JSX elements is correctly placed. There are the possible configurations:

• always: The first property should always be placed on a new line.
• never : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag.
• multiline: The first property should always be placed on a new line when the JSX tag takes up multiple lines.
• multiline-multiprop: The first property should always be placed on a new line if the JSX tag takes up multiple lines and there are multiple properties. This is the default value.

Examples of incorrect code for this rule, when configured with "always":

<Hello personal={true} />

<Hello personal={true}
    foo="bar"
/>

Examples of correct code for this rule, when configured with "always":

<Hello
    personal />

<Hello
    personal
/>

Examples of incorrect code for this rule, when configured with "never":

<Hello
    personal />

<Hello
    personal
/>

Examples of correct code for this rule, when configured with "never":

<Hello personal={true} />

<Hello personal={true}
    foo="bar"
/>

Examples of incorrect code for this rule, when configured with "multiline":

<Hello personal
    prop />

<Hello foo={{
}} />

Examples of correct code for this rule, when configured with "multiline":

<Hello personal={true} />

<Hello
    personal={true}
    foo="bar"
/>

Examples of incorrect code for this rule, when configured with "multiline-multiprop":

<Hello foo={{
    }}
    bar />

Examples of correct code for this rule, when configured with "multiline-multiprop":

<Hello foo={{
}} />

<Hello
    foo={{
    }}
    bar
/>

Rule Options

"react/jsx-first-prop-new-line": `"always" | "never" | "multiline" | "multiline-multiprop"`

When Not To Use It

If you are not using JSX then you can disable this rule.