Create a gist now

Instantly share code, notes, and snippets.

@mxstbr /Readme.md
Last active Apr 18, 2018

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

This comment has been minimized.

Show comment Hide comment
@AgtLucas

AgtLucas May 9, 2016

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

AgtLucas commented May 9, 2016

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

@duivvv

This comment has been minimized.

Show comment Hide comment
@duivvv

duivvv May 9, 2016

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

duivvv commented May 9, 2016

@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

This comment has been minimized.

Show comment Hide comment
@sean-clayton

sean-clayton May 9, 2016

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

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

sean-clayton commented May 9, 2016

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

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

@hkjorgensen

This comment has been minimized.

Show comment Hide comment
@hkjorgensen

hkjorgensen May 9, 2016

works great - thanks!

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

hkjorgensen commented May 9, 2016

works great - thanks!

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

@puleddu

This comment has been minimized.

Show comment Hide comment
@puleddu

puleddu May 10, 2016

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

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

This comment has been minimized.

Show comment Hide comment
@mxstbr

mxstbr May 10, 2016

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

Owner

mxstbr commented May 10, 2016

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

@andrewcoelho

This comment has been minimized.

Show comment Hide comment
@andrewcoelho

andrewcoelho May 13, 2016

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?

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

This comment has been minimized.

Show comment Hide comment
@AgtLucas

AgtLucas Jun 23, 2016

@duivvv Thanks!!!

@duivvv Thanks!!!

@lynkxyz

This comment has been minimized.

Show comment Hide comment
@lynkxyz

lynkxyz Aug 9, 2016

How to make className like this, i very like this

lynkxyz commented Aug 9, 2016

How to make className like this, i very like this

@aarow

This comment has been minimized.

Show comment Hide comment
@aarow

aarow Sep 21, 2016

great font italics. What is this fontface?

aarow commented Sep 21, 2016

great font italics. What is this fontface?

@irvingv8

This comment has been minimized.

Show comment Hide comment
@irvingv8

irvingv8 Oct 12, 2016

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

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

@corysimmons

This comment has been minimized.

Show comment Hide comment
@AlexKvazos

This comment has been minimized.

Show comment Hide comment
@AlexKvazos

AlexKvazos Oct 25, 2016

@andrewcoelho where you able to fix the css issue?

@andrewcoelho where you able to fix the css issue?

@abooayoob

This comment has been minimized.

Show comment Hide comment
@abooayoob

abooayoob Oct 28, 2016

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 commented Oct 28, 2016

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

This comment has been minimized.

Show comment Hide comment
@jimthedev

jimthedev Oct 29, 2016

@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

@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

This comment has been minimized.

Show comment Hide comment
@anhldbk

anhldbk Nov 30, 2016

Nice! Thank you.

anhldbk commented Nov 30, 2016

Nice! Thank you.

@kokokele

This comment has been minimized.

Show comment Hide comment
@kokokele

kokokele Dec 16, 2016

cool , thx

cool , thx

@nilsynils

This comment has been minimized.

Show comment Hide comment
@nilsynils

nilsynils Dec 16, 2016

Thank you!

Thank you!

@krabbypattified

This comment has been minimized.

Show comment Hide comment
@krabbypattified

krabbypattified Dec 30, 2016

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

@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

This comment has been minimized.

Show comment Hide comment
@TimAstier

TimAstier Dec 31, 2016

Thanks!

Thanks!

@denskiz

This comment has been minimized.

Show comment Hide comment
@denskiz

denskiz Jan 7, 2017

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

This isn't working for me....

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

This comment has been minimized.

Show comment Hide comment
@domwashburn

domwashburn Jan 16, 2017

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

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

@atalebagha

This comment has been minimized.

Show comment Hide comment
@atalebagha

atalebagha Jan 25, 2017

what font is that in the gif image?

what font is that in the gif image?

@atalebagha

This comment has been minimized.

Show comment Hide comment
@atalebagha

atalebagha Jan 25, 2017

also can you use emmet with css module class names?

also can you use emmet with css module class names?

@glennreyes

This comment has been minimized.

Show comment Hide comment
@glennreyes

glennreyes Jan 28, 2017

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

glennreyes commented Jan 28, 2017

@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

This comment has been minimized.

Show comment Hide comment
@suweya

suweya Jan 30, 2017

Good! It's work

suweya commented Jan 30, 2017

Good! It's work

@guojindai

This comment has been minimized.

Show comment Hide comment
@guojindai

guojindai Feb 12, 2017

it's cool

it's cool

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Feb 17, 2017

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 commented Feb 17, 2017

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'

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Feb 17, 2017

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

ghost commented Feb 17, 2017

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

This comment has been minimized.

Show comment Hide comment
@joel-regen

joel-regen Feb 23, 2017

THANKS! works great!

THANKS! works great!

@mohdhazwan

This comment has been minimized.

Show comment Hide comment
@mohdhazwan

mohdhazwan Feb 27, 2017

purely genius. thanks

purely genius. thanks

@saadbinsaeed

This comment has been minimized.

Show comment Hide comment
@saadbinsaeed

saadbinsaeed Mar 3, 2017

commendable. Thank you

commendable. Thank you

@shahzeb1

This comment has been minimized.

Show comment Hide comment
@shahzeb1

shahzeb1 Mar 3, 2017

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

shahzeb1 commented Mar 3, 2017

@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

This comment has been minimized.

Show comment Hide comment
@a1exlism

a1exlism Mar 5, 2017

Really awesome, thx!

a1exlism commented Mar 5, 2017

Really awesome, thx!

@zfaty

This comment has been minimized.

Show comment Hide comment
@zfaty

zfaty Mar 9, 2017

Thank you :)

zfaty commented Mar 9, 2017

Thank you :)

@hugotox

This comment has been minimized.

Show comment Hide comment
@hugotox

hugotox Mar 16, 2017

Thank you!!

hugotox commented Mar 16, 2017

Thank you!!

@tennessine

This comment has been minimized.

Show comment Hide comment
@tennessine

tennessine Mar 23, 2017

Thanks a lot :)

Thanks a lot :)

@marcofugaro

This comment has been minimized.

Show comment Hide comment
@marcofugaro

marcofugaro Mar 24, 2017

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!

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!

@waldemirflj

This comment has been minimized.

Show comment Hide comment
@waldemirflj

waldemirflj Apr 4, 2017

Thank you! <3

Thank you! <3

@kamina125

This comment has been minimized.

Show comment Hide comment
@kamina125

kamina125 Apr 12, 2017

thanks a bunch!

thanks a bunch!

@chhuang

This comment has been minimized.

Show comment Hide comment
@chhuang

chhuang Apr 13, 2017

Just hit control + e.

chhuang commented Apr 13, 2017

Just hit control + e.

@cesargdm

This comment has been minimized.

Show comment Hide comment
@cesargdm

cesargdm Apr 30, 2017

Excellent!

Excellent!

@rkimsb2

This comment has been minimized.

Show comment Hide comment
@rkimsb2

rkimsb2 May 11, 2017

Also work with typescript. Thanks.

rkimsb2 commented May 11, 2017

Also work with typescript. Thanks.

@Polypants

This comment has been minimized.

Show comment Hide comment
@Polypants

Polypants May 17, 2017

THANK

THANK

@jeffAquinn

This comment has been minimized.

Show comment Hide comment
@jeffAquinn

jeffAquinn May 19, 2017

Great Work and Thank you very much

Great Work and Thank you very much

@philipyoungg

This comment has been minimized.

Show comment Hide comment
@philipyoungg

philipyoungg May 23, 2017

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

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

@arteforme

This comment has been minimized.

Show comment Hide comment
@arteforme

arteforme May 25, 2017

Awesome, thanks!

Awesome, thanks!

@YehSal

This comment has been minimized.

Show comment Hide comment
@YehSal

YehSal May 25, 2017

Works, thank you!

YehSal commented May 25, 2017

Works, thank you!

@podrivo

This comment has been minimized.

Show comment Hide comment
@podrivo

podrivo May 29, 2017

Thanks!

podrivo commented May 29, 2017

Thanks!

@britstarr

This comment has been minimized.

Show comment Hide comment
@britstarr

britstarr May 30, 2017

Thanks!

Thanks!

@LoicGoyet

This comment has been minimized.

Show comment Hide comment
@LoicGoyet

LoicGoyet May 31, 2017

awesome, thanks !

awesome, thanks !

@designforhuman

This comment has been minimized.

Show comment Hide comment
@designforhuman

designforhuman Jun 2, 2017

Thanks!!

Thanks!!

@zhulinpinyu

This comment has been minimized.

Show comment Hide comment
@zhulinpinyu

zhulinpinyu Jun 28, 2017

Awesome, thanks.

Awesome, thanks.

@thecosss

This comment has been minimized.

Show comment Hide comment
@thecosss

thecosss 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=""

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

This comment has been minimized.

Show comment Hide comment
@suncn

suncn Sep 6, 2017

thank you very much

suncn commented Sep 6, 2017

thank you very much

@triyanarief

This comment has been minimized.

Show comment Hide comment
@triyanarief

triyanarief Oct 6, 2017

wow thank you!

wow thank you!

@pakman198

This comment has been minimized.

Show comment Hide comment
@pakman198

pakman198 Oct 20, 2017

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

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

@kalm42

This comment has been minimized.

Show comment Hide comment
@kalm42

kalm42 Oct 22, 2017

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

kalm42 commented Oct 22, 2017

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

@arvinxx

This comment has been minimized.

Show comment Hide comment
@arvinxx

arvinxx Oct 24, 2017

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

arvinxx commented Oct 24, 2017

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

@ChrisPTY507

This comment has been minimized.

Show comment Hide comment
@ChrisPTY507

ChrisPTY507 Oct 30, 2017

worked like a charm. thanks!!!

worked like a charm. thanks!!!

@magicdawn

This comment has been minimized.

Show comment Hide comment
@magicdawn

magicdawn Nov 17, 2017

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

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

@Bokzan

This comment has been minimized.

Show comment Hide comment
@Bokzan

Bokzan Nov 29, 2017

Thanks!

Bokzan commented Nov 29, 2017

Thanks!

@sumankharel

This comment has been minimized.

Show comment Hide comment
@sumankharel

sumankharel Jan 2, 2018

Great! Thanks

Great! Thanks

@BenGedi

This comment has been minimized.

Show comment Hide comment
@BenGedi

BenGedi Jan 5, 2018

thanks!

BenGedi commented Jan 5, 2018

thanks!

@magdielikari

This comment has been minimized.

Show comment Hide comment
@magdielikari

magdielikari Jan 6, 2018

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

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

@tomholford

This comment has been minimized.

Show comment Hide comment
@tomholford

tomholford Feb 4, 2018

❤️

❤️

@a-eid

This comment has been minimized.

Show comment Hide comment
@a-eid

a-eid Feb 5, 2018

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

a-eid commented Feb 5, 2018

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

@audrius59

This comment has been minimized.

Show comment Hide comment
@audrius59

audrius59 Feb 20, 2018

Works great thank's!

Works great thank's!

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