Best practices for JSX beautification?


#1

I was happily using atom-beautify for beautification until I started coding React components. With JSX, however, I’m having lots of troubles with atom-beautify. One is that it is only working for .jsx files, but not for .js files. This is a known issue (#1165 in the repo). On Discuss, I found a tip to switch the beautifier to PrettyDiff for .js files, but this did not work for me.

There a other issues, like arrays not being formatted correctly (#1057). In effect, beautifying React components in Atom is quite cumbersome. I don’t want to blame the devs of atom-beautify or PrettyDiff for this, JSX is a complicated beast. Unfortunately, I am not experienced enough to send my own PRs for this.

As React is quite popular these days, I am wondering how others are dealing with this problem? Are there other beautification solutions I might not be aware of, or do you just “workaround” the quirks atom-beautify currently has, e.g. by not using elements in arrays at all?