Prettier: JSX exeeds line length limit

[dmnd]

Expected:

function Component() {
  return (
    <div 
      id="longid" 
      className="longclassname"
      foo="longvalue" 
      bar="longvalue"
      baz="longvalue"
    >
      hello
    </div>
  );
}

Actual

function Component() {
  return (
    <div id="longid" className="longclassname" foo="longvalue" bar="longvalue" baz="longvalue">
      hello
    </div>
  );
}

[jlongster]

Yeah, JSX needs a few more tweaks before it's totally viable.

[joshwcomeau]

It looks like JSX currently breaks around non-string attributes:

<Thing stringProp="thing" objectProp={
  object.property
} otherStringProp="hi there">

I think the priority should be on keeping props grouped, but splitting on the space between props.

<Thing 
  stringProp="thing" 
  objectProp={object.property}
  otherStringProp="hi there"
>

Of course it's tricky, because sometimes you'll want to do both:

<Thing
  stringProp="yeah"
  objectProp={{
    hi: 5,
    five: 'alive',
  }}
>

I believe this is the most widely-used approach for spacing JSX, as specified in AirBnb's JS guide.

Thanks for your work on this project, you're attempting to solve a problem that has been a thorn in my side for years :)

[vramana]

Closing this in favour of #73