Enforce jsx to start on new line if jsx is multiline Enforce jsx to start on new line if jsx is multiline reactjs reactjs

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