Which Atom Editor Syntax Highlighting Package for React/JSX ?

[nelsonic]

Which Atom.io package(s) are you using for syntax highlighting to make your React/JSX more readable?

@nikhilaravi @jrans @besarthoxhaj @izaakrogan

[nikhilaravi]

@jrans says one of language-javascript-jsx, react and linter-jsxhint

[jrans]

@nelsonic I dare find out which one....

[nelsonic]

Thanks! 👍

[gregtandiono]

I would suggest using https://atom.io/packages/language-babel, this already includes React JSX (tag autocompletion) plus es2015 goodies :) AND it also supports facebook's flow grammar out of the box! And after i install this package, i disable the default language-javascript package that you get from Atom when you first install it

[heshamadeldwedar]

install atom-react package apm install react then use javascript( jsx ) for your js files

[Xiaochi-Li]

@hellsinglord22 I've tried atom-react, the highlight feature somehow doesn't work

[heshamadeldwedar]

@Xiaochi-Li i started using VSCode myself :D

[newswim]

like @gregtandiono pointed out, language-babel is the pretty clear winner if you're using Atom.

site: https://atom.io/packages/language-babel
repo: https://github.com/gandm/language-babel

[dangreenisrael]

Shameless self promotion: I just published an autocomplete provider for autocomplete plus. Hopefully it's helpful for you guys https://github.com/dangreenisrael/atom-react-proptypes-autocomplete

[axe-z]

It does not work with render props...

[YuriiDonev]

You can create a custom file type by adding following in your config.cson file:
core:
customFileTypes:
"source.js.jsx": [
"jsx"
"js"
]
Here the source: https://stackoverflow.com/questions/53145360/atom-how-to-change-default-syntax-highlighting-for-js-files-to-language-babel

[brentgreeff]

I would suggest using https://atom.io/packages/language-babel, this already includes React JSX (tag autocompletion) plus es2015 goodies :) AND it also supports facebook's flow grammar out of the box! And after i install this package, i disable the default language-javascript package that you get from Atom when you first install it

I have done as you recommend, and yes, the syntax highlighting does seem nicer than language-javascript but tag completion doesnt work. auto-indent in JSX doesnt work. if [tab] doesnt work.
The file-type was set to "Flow javascript" automatically.