Among other things, this is one of the reasons I don't like Prettier

[ackvf]

For a developer using JSX an <a .../> element is pretty irrelevant, type it once and forget it.
On the contrary, a custom <Button ... /> component and its props are pretty important.

But Prettier, of course, knows better!

It doesn't like my Button

const button = <Button
  disabled={isWrongChain}
  title={title}
  fullWidth
  label='Buy On Secondary'
  className='!px-4'
/>

And thinks this is better

const button = <Button disabled={isWrongChain} title={title} fullWidth label='Buy On Secondary' className='!px-4' />

On the other hand, this is apparently too bad

<a className='w-full' href={`${OPEN_SEA_NFT_URL_PREFIX[chainId]}/${contractAddress}`} target='_blank' rel='noopener' >{button}</a>

So prettier decides this is better

<a
  className='w-full'
  href={`${OPEN_SEA_NFT_URL_PREFIX[chainId]}/${contractAddress}`}
  target='_blank'
  rel='noopener'
>
  {button}
</a>

[sosukesuzuki]

Prettier will break lines depending on the value of print-width(default 80). I think you can avoid this by increasing print-width.

[ackvf]

I do appreciate your response, however, your suggestion doesn't solve anything. It just moves the threshold left or right. I am talking about context.
The props of an html element are not really important and they will rarely ever change, on the other hand, the custom <Button /> component has bunch of important props that are better understandable if written as multiline.