Skip to content

Instantly share code, notes, and snippets.

Last active June 25, 2024 18:16
Show Gist options
  • Save mxstbr/361ddb22057f0a01762240be209321f0 to your computer and use it in GitHub Desktop.
Save mxstbr/361ddb22057f0a01762240be209321f0 to your computer and use it in GitHub Desktop.
Enable tab completion for JSX with Emmet in Atom

Enable tab completion for JSX with Emmet in Atom

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

Gif of the tab completion working

  1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
  2. Add these lines of code to your keymap:
  '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)

Copy link

suncn commented Sep 6, 2017

thank you very much

Copy link

wow thank you!

Copy link

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

Copy link

kalm42 commented Oct 22, 2017

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

Copy link

arvinxx commented Oct 24, 2017

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

Copy link

worked like a charm. thanks!!!

Copy link

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

Copy link

Bokzan commented Nov 29, 2017


Copy link

Great! Thanks

Copy link

BenGedi commented Jan 5, 2018


Copy link

mmagdiel commented Jan 6, 2018

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

Copy link


Copy link

a-eid commented Feb 5, 2018

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

Copy link

Works great thank's!

Copy link

Super useful! Many thanks!!

Copy link


Copy link

Thank you sir!

Copy link

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.

Copy link

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

Copy link

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.


Copy link

Flaex commented Dec 7, 2018

Thanks a lot!!

Copy link

I love you.

Copy link


Copy link

iloveip commented May 15, 2019

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 
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?

Copy link

Analova commented Jun 18, 2019

It is not working for me.

Copy link

appsparkler commented Jun 28, 2019

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

Good Luck...

Copy link

I love you.

Copy link

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?

Copy link


Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment