This guide assumes you have the emmet
and language-babel
packages already installed in Atom
- Open the
keymap.cson
file by clicking onAtom -> Keymap…
in the menu bar - Add these lines of code to your keymap:
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Now open a file with JSX code, type div.myclass
, press tab and it should autocomplete to <div className="myclass"></div>
! (if it's not properly syntax highlighted, select Babel ES6 JavaScript
or JSX
as the syntax, this won't work otherwise)