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

W

5

13

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?

Winifred answered 14/5, 2016 at 21:57 Comment(3)

Please feel free to create an Issue on the Atom-Beautify repository: github.com/Glavin001/atom-beautify/issues By providing a debug.md Gist myself and others may be able to help you to get it working. – Timorous 5/9, 2016 at 4:54

did you find a working solution? – Fuchsin 2/12, 2016 at 13:34

Nope. I use VSCode instead that is most powerfull in formatting jsx :) – Winifred 2/12, 2016 at 13:48

W

5

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

Winifred answered 4/1, 2017 at 9:22 Comment(0)

T

12

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!

Teresiateresina answered 15/5, 2016 at 18:44 Comment(5)

I tried language-babel but, correct me if I'm wrong, it auto-indents only jsx not local javascript in function & co. – Winifred 15/5, 2016 at 19:11

I'm afraid I can't be certain on that. I just went in and played around with settings and it seems to have the options that you're looking for, and I've had no issues, all my javascript and react code is properly indented automatically. Sorry if this wasn't more help. – Teresiateresina 15/5, 2016 at 19:22

react and language-babel seem to be colliding with each other - I get a warning message about this. – Sunderance 25/11, 2016 at 7:49

I had this collision problem too. I'm using only react for now and it seems to help a lot – Aegis 3/5, 2017 at 22:41

Same problem here, react and language-babel doesn´t work together. I used language-babel so far. – Introit 24/5, 2017 at 12:23

W

5

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

Winifred answered 4/1, 2017 at 9:22 Comment(0)

S

4

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

Stoush answered 24/9, 2017 at 15:1 Comment(0)

P

3

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, ..

Pricillaprick answered 7/8, 2017 at 10:28 Comment(1)

I just started using Atom with the Nuclide package for JSX. Prettier works just fine! – Prot 10/1, 2018 at 5:18

V

1

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).

Vitus answered 19/2, 2020 at 2:13 Comment(1)

I like miniprettier, but there's no way to apply it on save 😔. – Boeotian 13/11, 2020 at 2:56

Recommended topics

Hot tags