Enforce jsx to start on new line if jsx is multiline

Question

What eslint rule would prefer the former over the second when the jsx spans multiple lines? Currently prettier is changing preferred to notPreferred

const preferred = (
    <tag
        prop={hi}
        another={test}
    \>
);

const notPreferred = (<tag
        prop={hi}
        Another={test}
    \>
);

Answer 1

I was looking for the same, it seems that react/jsx-wrap-multilines rule covers that.

This means adding:

"react/jsx-wrap-multilines": ["error", {
   "declaration": "parens-new-line",
    "assignment": "parens-new-line",
    "return": "parens-new-line",
    "arrow": "parens-new-line",
    "condition": "parens-new-line",
    "logical": "parens-new-line",
    "prop": "parens-new-line"
  }
]

This does the job, and you can customize it in multiple ways, take a look at the documentation 👍