Atom-beautify: Support for JSX syntax (ReactJS)

[stremlenye]

Hi.
I think, it's hard to implement, but would be useful for a lot of people.
Have you this in plans?

[Glavin001]

No plans currently, however I am open to the idea. The current JavaScript beautifier ( js-beautify ) does not yet support JSX so we will either have to wait for js-beautify support or find / create another beautifier than can handle this.

Continuation of #12 (duplicate).

[orktes]

Hi! The Atom React plugin now has initial JSX reformatting support http://orktes.github.io/atom-react/#jsx-reformatting

[luisrudge]

Can we integrate atom-react @Glavin001?

[Glavin001]

Awesome that Atom React now supports Beautification. If someone would like to submit a Pull Request to add support for Atom Beautify I would definitely be open to merging it.

See https://github.com/Glavin001/atom-beautify/pulls?q=is%3Apr+is%3Aclosed for example Pull Requests for adding new language support and applicable Atom react code at https://github.com/orktes/atom-react/blob/master/lib/atom-react.coffee#L137-L180

[prettydiff]

Pretty Diff supports JSX format using its jspretty, markupmin, and markup_beauty libraries. Here are some code samples to test against: http://prettydiff.com/unit_tests/beautification_javascript_jsx.txt

Here is my concept of support: http://prettydiff.com/guide/react_jsx.xhtml

Also, I am working on adding support for all atom-beautify supported markup based langauges/template schemes. This support is missing some minor enhancements to the code that will be completed in the next few days.

[Glavin001]

Awesome @prettydiff !! Thank you for such great support! Let me know if there's anything I can do. I'll take a look this weekend into setting up beautifier for JSX and any others.

[Glavin001]

Will be supported once #282 is released.

[Glavin001]

Published to v0.25.0

This is a very big release with lots of internal changes and (hopefully) no breaking changes. Please let me know if you are experiencing any unusual behaviour / breaking changes after updating. Thank you.

[framerate]

Atom Beautify could not find a supported beautifier for this file
Atom Beautify could not determine a supported beautifier to handle this file with grammar "JavaScript (JSX)" and extension ".jsx". If you would like to request support for this file and it's language, please create an issue for Atom Beautify at https://github.com/Glavin001/atom-beautify/issues

When I try and beautify a .jsx file.

[Glavin001]

@framerate looks like JavaScript (JSX) is not supported (will have to add that) but jsx should be detected: https://github.com/Glavin001/atom-beautify/blob/master/src/languages/jsx.coffee#L11

• [x] Add JavaScript (JSX) grammar to JSX language

[luisrudge]

I'm having this problem too even with a .js file

[Glavin001]

Could you guys run command Atom Beautify - Help Debug Editor

[luisrudge]

I want to test with the new version first. Let me know when you publish it.

[luisrudge]

My error is this:

Atom Beautify could not determine a supported beautifier to handle this file with grammar "JavaScript (JSX)" and extension ".js". If you would like to request support for this file and it's language, please create an issue for Atom Beautify at https://github.com/Glavin001/atom-beautify/issues

[Glavin001]

I have added JavaScript (JSX) grammar to language.

Published to v0.27.2

[luisrudge]

Ok. I'll test this now!

[luisrudge]

I'm still having the same issue:

Atom Beautify could not determine a supported beautifier to handle this file with grammar "JavaScript (JSX)" and extension ".js". If you would like to request support for this file and it's language, please create an issue for Atom Beautify at https://github.com/Glavin001/atom-beautify/issues

[luisrudge]

There's no .js extension on the jsx language :( That's the problem

[Glavin001]

Published update to v0.27.4

JSX language will be detected if:

• Grammar is JavaScript (JSX) or JSX
  or
• Extension is jsx (also js, however it will not matter because JavaScript will be default grammar and grammars take precedence. Use the grammar for selecting language, not the extension).

[phuna]

@Glavin001 If I install language-babel or language-javascript-jsx then beautification broken as grammar is detected as "Babel ES6 Javascript" or "Javascript with JSX" respectively.
Can I configure grammar matching somewhere? (I use .js extension).
Thank you.

[prettydiff]

@phuna In the Atom Beautify settings you can choose a beautifier for a given language. These choices are at the bottom of the settings panel in the Atom Beautify settings. Change the beautifier for regular JavaScript (Language Config - JavaScript - Default Beautifier) from JS Beautify to Pretty Diff.

If that fixes your problems then you have found a JS Beautify bug and should open an issue with that project at https://github.com/beautify-web/js-beautify/issues. If that does not solve the problem then please post sample code to a gist so that we can investigate this further.

[phuna]

@prettydiff you're correct, changing to Pretty Diff gives much better result. It seems that's a JS Beautify problem. I've just checked their issue list and I see similar problem already reported 12 days ago: https://github.com/beautify-web/js-beautify/issues/834
Thank you for your quick response.