Thats what im talking about. If you add text to a line, and it goes over a length, it will reformat a jsx element into about 5 lines instead of 1. Similarly, when you add more than it needs because you want consistency, or know youll add more, and the formatter runs, often it undoes your work.

Prettier lets you control object literal formatting by inserting/removing the newline after the opening brace, I'm not sure why they don't do that for JSX elements.

https://prettier.io/docs/en/rationale.html#multi-line-object...

If you really want 5 lines, add a dummy // in there and will be forced to use 5 instead of 1. Dirty hack, but it works.

That, or a prettier-ignore comment above the JSX tag. I find your solution more elegant, though.

My two cents: Write the comment's purpose inside it. "// Comment inserted to force prettier line break until more attributes are added"

Im talking about adding an attribute in the next 5 minutes, no, im not going to add a comment, or an ignore line while im editing a component. Those are really awful work arounds to a man made problem.

It's tunable. Pick a line length you all agree on and when it reformats after that, that's what you asked for.

If the rule never works for you, turn that one off.

If the rule is what you want 99% of the time but it made this one line look dumb, mark that one block #ignore and let the team decide in CR if that was the right call.