Skip to content

Instantly share code, notes, and snippets.

@mxstbr
Last active March 27, 2026 02:20
Show Gist options
  • Select an option

  • Save mxstbr/361ddb22057f0a01762240be209321f0 to your computer and use it in GitHub Desktop.

Select an option

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:
'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)

Copy link
Copy Markdown

ghost commented Nov 12, 2020

Thanks

@kqvanity
Copy link
Copy Markdown

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