Formatting JSX


#1

I’ve spent significant time the last week trying to format JSX code and I cannot get it to happen. I have read up on many of the Beautify packages, I’ve looked at https://orktes.github.io/atom-react/ and read a dozen or so github issues around the topic of formatting JSX. So far, regardless of what package I use, the results are awful. The formatter either winds up placing angle brackets on their own line, clumping all the JSX into a single line, or not having any effect.

At this point, I’ve given up trying to figure this out. I’m not sure what variables are contributing to my issues. Whether its the language grammar global setting in Atom, the formatter, having competing formatters?, the file extension. I simply can’t get my code to format. And I’ve tried.


#2

This is the result when I apply the non language specific Beautify to a blob of JSX

return (

<
div >
<
span > test < /span> <
/div>
);


#3

I use http://atom.io/packages/prettier-atom
It sorts out all my JavaScript and react quite nicely
And the http://atom.io/packages/language-babel package also.