How to configure atom-beautify package to format with babel/jsx javascript files?

Question

I searched for a package to auto-indent and beautify my React/babel code. I just tried atom-beautify which seems to have good feeback on Atom.

But the result on an usual babel file is not good enough: "HTML tag" doesn't indent as wanted. Has anyone tried to use atom-beautify with babel?

Answer 1

I already faced the same problem and ended using prettier-atom . It works really nice with HTML tags.

Answer 2

I use miniprettier, it's listed on Prettier official site as a recommended package.

It's like prettier-atom but without all the dependencies. I love it! It works very well on JSX. I use atom-beautify for other filetypes (e.g. JSON, pure HTML, JS).

Answer 3

I currently use the plugins language-babel, react, and autoclose-html to handle this for me with no issues.

https://atom.io/packages/autoclose-html

https://atom.io/packages/language-babel

https://atom.io/packages/react

Hope this helps!

Answer 4

Atom beautify did not support jsx at that time. it does now :)

Answer 5

I use Prettier (https://prettier.io/) to re-write my code into best practices, so all the team can write code as if only one person has written it all. Supports JSX, and recently, even TypeScript, CSS, SCSS, ..