Enable tab completion for JSX with Emmet in Atom

Readme.md

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. 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)

It is not working for me.

This worked for me. Thanks a lot.

This is what I did:

1. Install atom package language-babel
2. Install atom package emmet
3. Add the following snippet at the top of keymap.cson which is available on File > Keymap in the Atom Toolbar

'atom-text-editor:not([mini])':'tab':

  'emmet:expand-abbreviation-with-tab'

Good Luck...

I love you.

This is beautiful, but I cannot get the syntaxProfiles.json to work... - I tried the single quote code from first comments, but it didn't work, is there anywhere special the /emmet dir needs to reside?

Thanks

It didn't work until the Babel ES6 JavaScript syntax was also selected.