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?

Please feel free to create an Issue on the Atom-Beautify repository: https://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. — Glavin001, Sep 05 '16 at 04:54
Nope. I use VSCode instead that is most powerfull in formatting jsx :) — Damien Leroux, Dec 02 '16 at 13:48

score 12 · Answer 1 · answered May 15 '16 at 18:44

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!

answered May 15 '16 at 18:44

David Meents

621
4
12

1

I tried language-babel but, correct me if I'm wrong, it auto-indents only jsx not local javascript in function & co. – Damien Leroux May 15 '16 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. – David Meents May 15 '16 at 19:22
4

`react` and `language-babel` seem to be colliding with each other - I get a warning message about this. – Karolis.sh Nov 25 '16 at 07:49
I had this collision problem too. I'm using only `react` for now and it seems to help a lot – tkcast May 03 '17 at 22:41
Same problem here, react and language-babel doesn´t work together. I used language-babel so far. – NEOline May 24 '17 at 12:23

score 5 · Accepted Answer · answered Jan 04 '17 at 09:22

5

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

answered Jan 04 '17 at 09:22

Damien Leroux

11,177
7
43
57

score 4 · Answer 3 · answered Sep 24 '17 at 15:01

4

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

answered Sep 24 '17 at 15:01

Jalal

3,308
4
35
43

score 3 · Answer 4 · answered Aug 07 '17 at 10:28

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

answered Aug 07 '17 at 10:28

elQueFaltaba

618
1
9
17

1

I just started using Atom with the Nuclide package for JSX. Prettier works just fine! – sunitkatkar Jan 10 '18 at 05:18

score 1 · Answer 5 · answered Feb 19 '20 at 02:13

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

answered Feb 19 '20 at 02:13

hoohoo-b

1,141
11
12

I like miniprettier, but there's no way to apply it on save . – seemcat Nov 13 '20 at 02:56

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

5 Answers5