Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for JSX syntax (ReactJS) #144

Closed
stremlenye opened this issue Nov 20, 2014 · 22 comments · Fixed by #348
Closed

Support for JSX syntax (ReactJS) #144

stremlenye opened this issue Nov 20, 2014 · 22 comments · Fixed by #348

Comments

@stremlenye
Copy link

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

@stremlenye stremlenye reopened this Nov 24, 2014
@Glavin001 Glavin001 self-assigned this Nov 24, 2014
@Glavin001
Copy link
Owner

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
Copy link

orktes commented Jan 26, 2015

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

@luisrudge
Copy link
Contributor

Can we integrate atom-react @Glavin001?

@Glavin001
Copy link
Owner

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
Copy link
Collaborator

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
Copy link
Owner

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
Copy link
Owner

Will be supported once #282 is released.

@Glavin001 Glavin001 modified the milestones: v1.0.0, v1.1.0 May 1, 2015
@Glavin001 Glavin001 mentioned this issue May 3, 2015
Glavin001 referenced this issue May 3, 2015
Language config options for:
- disabled - Disable beautifying a language
  - `disabled_languages` no longer works
  - use the options for each language to disable them
- default_beautifier - Preferred beautifier to use for language
  - if there are multiple beautifiers for a language it will choose the
    beautifier the user has set as default. Initially the default
    beautifier is just the first beautifier to register support for that
    language
@Glavin001 Glavin001 modified the milestones: v1.0.0, v1.1.0 May 3, 2015
@Glavin001
Copy link
Owner

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
Copy link

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
Copy link
Owner

@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

  • Add JavaScript (JSX) grammar to JSX language

@luisrudge
Copy link
Contributor

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

@Glavin001
Copy link
Owner

Could you guys run command Atom Beautify - Help Debug Editor

@luisrudge
Copy link
Contributor

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

@luisrudge
Copy link
Contributor

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
Copy link
Owner

I have added JavaScript (JSX) grammar to language.

Published to v0.27.2

@luisrudge
Copy link
Contributor

Ok. I'll test this now!

@luisrudge
Copy link
Contributor

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
Copy link
Contributor

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

@Glavin001
Copy link
Owner

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
Copy link

phuna commented Jan 1, 2016

@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
Copy link
Collaborator

@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
Copy link

phuna commented Jan 1, 2016

@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: beautifier/js-beautify#834
Thank you for your quick response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants