# Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/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](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

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.
- `multiprop`: The first property should never be placed on a new line unless there are multiple properties.
- `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"`:

```jsx
<Hello personal={true} />

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

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

```jsx
<Hello
    personal />

<Hello
    personal
/>
```

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

```jsx
<Hello
    personal />

<Hello
    personal
/>
```

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

```jsx
<Hello personal={true} />

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

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

```jsx
<Hello personal
    prop />
```

```jsx
<Hello foo={{
}} />
```

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

```jsx
<Hello personal={true} />

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

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

```jsx
<Hello foo={{
    }}
    bar />
```

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

```jsx
<Hello foo={{
}} />

<Hello
    foo={{
    }}
    bar
/>
```

## Rule Options

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

## When Not To Use It

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