search

dwyl / learn-react

"The possibilities are numerous once we decide to act and not react." ~ George Bernard Shaw
108 stars 22 forks source link

Which Atom Editor Syntax Highlighting Package for React/JSX ? #12

Open nelsonic opened 8 years ago

nelsonic commented 8 years ago

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

@nikhilaravi @jrans @besarthoxhaj @izaakrogan

nikhilaravi commented 8 years ago

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

jrans commented 8 years ago

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

nelsonic commented 8 years ago

Thanks! :+1:

gregtandiono commented 8 years ago

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 commented 8 years ago

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

Xiaochi-Li commented 7 years ago

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

heshamadeldwedar commented 7 years ago

@Xiaochi-Li i started using VSCode myself :D

newswim commented 7 years ago

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 commented 6 years ago

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 commented 5 years ago

It does not work with render props...

YuriiDonev commented 5 years ago

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 commented 4 years ago

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.