Create a gist now

Instantly share code, notes, and snippets.

@mxstbr /Readme.md
Last active Oct 22, 2017

What would you like to do?
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 commented May 9, 2016

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

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 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 commented May 9, 2016 edited

works great - thanks!

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

puleddu commented May 10, 2016

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

Owner

mxstbr commented May 10, 2016

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

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?

@duivvv Thanks!!!

lynkxyz commented Aug 9, 2016

How to make className like this, i very like this

aarow commented Sep 21, 2016

great font italics. What is this fontface?

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

@andrewcoelho where you able to fix the css issue?

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?

@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 commented Nov 30, 2016

Nice! Thank you.

cool , thx

Thank you!

@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.

Thanks!

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

This isn't working for me....

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

what font is that in the gif image?

also can you use emmet with css module class names?

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 commented Jan 30, 2017

Good! It's work

it's cool

@ghost

ghost commented Feb 17, 2017 edited by ghost

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 by ghost

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! 👍

THANKS! works great!

purely genius. thanks

commendable. Thank you

shahzeb1 commented Mar 3, 2017 edited

@ghost - I tried your snippet, but it seems to have some bugs. The overriding of the snippets too heavily out-weighs emmet, so emmet doesn't work on tab completion even on a simple "div" command (if there are div's anywhere else in the document, it'll just replace div[tab] with "div").

a1exlism commented Mar 5, 2017

Really awesome, thx!

zfaty commented Mar 9, 2017

Thank you :)

hugotox commented Mar 16, 2017

Thank you!!

Thanks a lot :)

Yeah the Stop emmet from hijacking basic tabbing doesn't work, you can't put both emmet and autocomplete to the TAB key.

Just use cmd+shift-e that by default works in JS, and transforms class into className also!

Thank you! <3

thanks a bunch!

chhuang commented Apr 13, 2017

Just hit control + e.

Excellent!

rkimsb2 commented May 11, 2017

Also work with typescript. Thanks.

THANK

Great Work and Thank you very much

can we also do CSS autocomplete on this? Perfect case to use: styled-components

Awesome, thanks!

YehSal commented May 25, 2017

Works, thank you!

podrivo commented May 29, 2017

Thanks!

Thanks!

awesome, thanks !

Thanks!!

Awesome, thanks.

thecosss commented Jul 5, 2017

Is there any way to apply React Native syntax?
It looks like this

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

So it uses style={} instead of className=""

suncn commented Sep 6, 2017

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 ?

kalm42 commented Oct 22, 2017

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

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