DEV Community

loading...

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.

'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

Discussion (1)

pic
Editor guide
Collapse
kamalo__22 profile image
Ibrahim Kamal

finally yeeeeeeeeeees

thank you so much