react-to-jsx icon indicating copy to clipboard operation
react-to-jsx copied to clipboard

Simpler formatting with less line breaks

Open darekrossman opened this issue 10 years ago • 2 comments

Been diggin in trying to figure out a way to sort of eliminate all the line breaks for simple one-line tags:

Given the following:

<Button level="info" type="foo">Info</Button>

I'm trying to make it print like this:

<Button level="info" type="foo">Info</Button>

But instead it prints like this:

<Button
  level="info"
  type="raised">
  Info
</Button>

It's not as pronounced when there's only one attribute, but it's still multi-line:

<Button level="info">
  Info
</Button>

I'm probably just being nitpicky here, but ultimately I'm trying to just have it printed the same it was it was originally written. The more I think about it, the more I realize it's probably just not possible.

I know this kind of stuff is extremely tricky - figuring I might just go with typing out the raw strings, but wanted to see if you had any thoughts.

darekrossman avatar Apr 30 '15 13:04 darekrossman

Yeah, better/more granular whitespace control is something I'd like to address, but haven't spent much time thinking about it. The difficult thing is determining when to break something to multiple lines or not.

It should be easy to add an option like "only break across multiple lines if there are more than [x] props", which wouldn't work for all cases but might be useful.

Another possibility might be to let you pass in a maximum line length, so you could effectively say "if this doesn't fit within 80 columns, break the props onto separate lines."

alexlande avatar Apr 30 '15 17:04 alexlande

+1

joaomilho avatar Feb 10 '16 12:02 joaomilho