DEV Community


Enabling emmet tab completion for React in Atom

emilledigital profile image Emille Gx Updated on ・1 min read

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.

  'tab': 'emmet:expand-abbreviation-with-tab'
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Hit the TAB key


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

Discussion (1)

Editor guide
kamalo__22 profile image
Ibrahim Kamal

finally yeeeeeeeeeees

thank you so much