DEV Community

Emille G.
Emille G.

Posted on • Updated on

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'
Enter fullscreen mode Exit fullscreen mode

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

div.yourclassname
Enter fullscreen mode Exit fullscreen mode

Hit the TAB key

Enjoy!

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

Top comments (1)

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

finally yeeeeeeeeeees

thank you so much