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)

thank you very much

wow thank you!

if i try to expand .myClass ir produces <div className={style.myClass}></div>
Do you have an idea why this is happening ?

Thank you! This was seriously making me hate writing JSX.

@pakman198 you need to disable or uninstall the emmet-jsx-css-modules package and reopen the atom.

worked like a charm. thanks!!!

Em~ this generates className='cls', but Vue jsx need class='cls' 😭
@yyx990803 any solutions ?

Thanks!

Great! Thanks

thanks!

I love you!! Thank you so much...

❤️

it doesn't work for me for some reason, any help appreciated

Works great thank's!

Super useful! Many thanks!!

Thank's!!!

Thank you sir!

Install react package. From Packages menu -> Setting View ->Install Packages/Themes. In the search input box type: react ; and press Enter key. Install react.js package and you are good to go.

Awesome!! Thank you. I was looking all over for this. :)

Thanks a lot for this!

Just a quick note for anyone having trouble getting this to work: as @ala4fadeel pointed out this requires the react.js package. Also, I had to restart Atom and disable/re-enable the react.js package to get this to work.

Cheers!

Thanks a lot!!

I love you.

Great!

Thank you very much! I also had to install react package, but I get the following warning:

Incompatible Package Detected
language-babel has detected the presence of an incompatible Atom package named 'react'. 
 
It is recommended that you disable either 'react' or language-babel 
 
Reason:
 
The Atom community package 'react' (not to be confused 
with Facebook React) monkey patches the atom methods 
that provide autoindent features for JSX. 
As it detects JSX scopes without regard to the grammar being used, 
it tries to auto indent JSX that is highlighted by language-babel. 
As language-babel also attempts to do auto indentation using 
standard atom API's, this creates a potential conflict.

Is there anyway to turn it off?

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.