Enforce jsx to start on new line if jsx is multiline
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 👍
For Me Adding This To Prettier Config Or .prettierrc Solved The Issue
"printWidth": 50
the default value is around 80
the more you lower the value, the more multiline it gets
Good Luck Coding :)