Enforce jsx to start on new line if jsx is multiline

user_3916570 0
Viewed 3062

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}
    \>
);
eslintrc jsx eslint reactjs javascript
2 Answers

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

user_14068490

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

user_96143420
Related