Enabling emmet tab completion for React in Atom

Thank you to @mxstbr for this solution.

I just want to elucidate and extend upon this gist, and just lay out some steps for anyone who might need this right now.

Install emmet and language-babel

First up, ensure that emmet and language-babel are installed in Atom.

Set your file's language

With your React component's .js file open in Atom, hit CTRL + SHIFT + L and set the language of the file to 'Babel ES6 JavaScript'.

Add a new key binding

In Atom, go to Settings > Key Bindings and click on your keymap file

Add the following lines to keymap.cson and save.

'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

Head over to your .js file and add 'className' to your component JSX, the emmet way

div.yourclassname

Hit the TAB key

Enjoy!

Thanks again to @mxstbr for posting the solution as a gist

Comments

[Ibrahim Kamal]

finally yeeeeeeeeeees

thank you so much