Create a gist now

Instantly share code, notes, and snippets.

@mxstbr /Readme.md
Last active Feb 27, 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?

@atalebagha

what font is that in the gif image?

@atalebagha

also can you use emmet with css module class names?

@glennreyes
glennreyes commented Jan 28, 2017 edited

@atalebagha Font is Operator Mono. There is an atom package called emmet-jsx-css-modules that allows you to use emmet with css modules

@suweya
suweya commented Jan 30, 2017

Good! It's work

@guojindai

it's cool

@ghost
ghost commented Feb 17, 2017 edited

Awesome thanks! Emmet now works in JSX but it's hijacking all the autocomplete functionality. e.g. I type fun and autocomplete offers as function snippet. I tab to autocomplete and the output is <fun></fun>.

How can this be avoided?

Here's some of my keymap.cson

# Stop emmet from hijacking tab from snippets and autocomplete
'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'

# Stop emmet from hijacking tab from snippet tab stops
'atom-text-editor[data-grammar="text html basic"]:not([mini]),
 atom-text-editor[data-grammar~="jade"]:not([mini]),
 atom-text-editor[data-grammar~="css"]:not([mini]),
 atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'snippets:next-tab-stop'

# Emmet for JSX
'atom-text-editor[data-grammar~="jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'
@ghost
ghost commented Feb 17, 2017 edited

Ok, answering my own question. This sorts it out for me:

# Stop emmet from hijacking basic tabbing
'atom-text-editor[data-grammar="text html basic"]:not([mini]),
 atom-text-editor[data-grammar~="jade"]:not([mini]),
 atom-text-editor[data-grammar~="css"]:not([mini]),
 atom-text-editor[data-grammar~="sass"]:not([mini])':
  'tab': 'snippets:next-tab-stop'

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

# Stop emmet from hijacking tab from snippets and autocomplete
'atom-text-editor.autocomplete-active:not([mini])':
  'tab': 'autocomplete-plus:confirm'

Evidently the order of these definitions is significant, though I don't know why.

Thanks again for this post! 👍

@joel-regen

THANKS! works great!

@mohdhazwan

purely genius. thanks

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