Create a gist now

Instantly share code, notes, and snippets.

@mxstbr /Readme.md
Last active Jan 20, 2017

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)

@AgtLucas
AgtLucas commented May 9, 2016

Cool! But I would love with single quotes not double quotes. :)

@duivvv
duivvv commented May 9, 2016 edited

@AgtLucas

syntaxProfiles.json in ~/emmet folder

{
  "html": {
    "tag_case": "lower",
    "attr_quotes": "single",
    "self_closing_tag": true
  },
  "jsx": {
    "tag_case": "lower",
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}
@sean-clayton
sean-clayton commented May 9, 2016 edited

@duivvv Awesome! Didn't know about syntaxProfiles.json before and now I do! 👍

http://docs.emmet.io/customization/syntax-profiles/

@hkjorgensen
hkjorgensen commented May 9, 2016 edited

works great - thanks!

protip™: Restart atom after you created the ~/emmet/syntaxProfiles.json file.

@puleddu
puleddu commented May 10, 2016

Trivial comment, can I? :)
What font and color scheme are you using in this little screencast? They look nice.

@mxstbr
Owner
mxstbr commented May 10, 2016

@puleddu I explain it right here: mxstbr/ama#12 (comment) 👍

@andrewcoelho

This works great, but screws up my tab functionality outside of JSX, for example when editing stylesheets. I would think the [data-grammar~="jsx"] bit in the keymap would prevent this, but it's not for me. Any ideas?

@AgtLucas

@duivvv Thanks!!!

@lynkxyz
lynkxyz commented Aug 9, 2016

How to make className like this, i very like this

@aarow
aarow commented Sep 21, 2016

great font italics. What is this fontface?

@irvingv8

@aarow that font is called 'operator', here you go: http://www.typography.com/blog/introducing-operator

@AlexKvazos

@andrewcoelho where you able to fix the css issue?

@abooayoob
abooayoob commented Oct 28, 2016 edited

Nevermind, sorry, for some reason I didn't realize I could create the file and folder myself.

@diuvvv:
Single quotes:

I do not seem to have any ~emmet folder?
mohammadalikhan ~ $ cd ~/emmet -bash: cd: /Users/mohammadalikhan/emmet: No such file or directory

I tried Settings -> Open config folder -> .atom/packages/emmet/syntaxProfiles.json
but that did not help

am I missing something?

@jimthedev

@abooayoob You need to create the ~/emmet directory and the syntaxProfiles.json:

mkdir ~/emmet
touch ~/emmet/syntaxProfiles.json
Now just edit the file and add in the contents above
@anhldbk
anhldbk commented Nov 30, 2016

Nice! Thank you.

@kokokele

cool , thx

@nilsynils

Thank you!

@krabbypattified

@andrewcoelho @AlexKvazos I found a solution to overridden tab functionality! In keymap.cson, after this snippet:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

write this:

'.pane .editor:not(.mini)':
  'tab': 'snippets:expand'

Put simply, this code says to override Emmet if there's already a snippet that exists outside of Emmet.

@TimAstier

Thanks!

@denskiz
denskiz commented Jan 7, 2017

'atom-text-editor[data-grammar~="jsx"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'

This isn't working for me....

@domwashburn

Does anyone know how I can get this to avoid auto expanding when I'm trying to use an autocomplete suggestion?

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