Prettier - how to set each jsx attribute to be on a new line?

Question

React

Actually, I set up a bunch of eslint + prettier for myself, everything works with one exception, in JSX all attributes of a tag are written on one line, but I would like each one on a new line:
How prettier formats now:

<li className={classNames} onMouseLeave={() => setMouseLeave(true)} onMouseEnter={() => setMouseLeave(false)}>

How should:

<li className={classNames} 
     onMouseLeave={() => setMouseLeave(true)} 
     onMouseEnter={() => setMouseLeave(false)}>

How to achieve this?
.prettierrc

{
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "trailingComma": "none",
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "bracketSpacing": true
}

Answer 1

There is a jsx-max-props-per-line rule in eslint with eslint-plugin-react . Set it up and use eslint's own autofix, or integrate eslint with prettier https://github.com/prettier/eslint-plugin-prettier https://github.com/prettier/prettier-eslint