Instantly share code, notes, and snippets.

@mxstbr mxstbr/Readme.md
Last active Feb 20, 2019

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

Copy link

AgtLucas commented May 9, 2016

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

@duivvv

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link
Owner Author

mxstbr commented May 10, 2016

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

@andrewcoelho

This comment has been minimized.

Copy link

andrewcoelho commented 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?

@AgtLucas

This comment has been minimized.

Copy link

AgtLucas commented Jun 23, 2016

@duivvv Thanks!!!

@lynkxyz

This comment has been minimized.

Copy link

lynkxyz commented Aug 9, 2016

How to make className like this, i very like this

@aarow

This comment has been minimized.

Copy link

aarow commented Sep 21, 2016

great font italics. What is this fontface?

@irvingv8

This comment has been minimized.

Copy link

irvingv8 commented Oct 12, 2016

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

@corysimmons

This comment has been minimized.

Copy link

corysimmons commented Oct 23, 2016

@AlexKvazos

This comment has been minimized.

Copy link

AlexKvazos commented Oct 25, 2016

@andrewcoelho where you able to fix the css issue?

@abooayoob

This comment has been minimized.

Copy link

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.

Copy link

jimthedev commented 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
@anhldbk

This comment has been minimized.

Copy link

anhldbk commented Nov 30, 2016

Nice! Thank you.

@kokokele

This comment has been minimized.

Copy link

kokokele commented Dec 16, 2016

cool , thx

@nilsynils

This comment has been minimized.

Copy link

nilsynils commented Dec 16, 2016

Thank you!

@krabbypattified

This comment has been minimized.

Copy link

krabbypattified commented 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.

@TimAstier

This comment has been minimized.

Copy link

TimAstier commented Dec 31, 2016

Thanks!

@denskiz

This comment has been minimized.

Copy link

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.

Copy link

domwashburn commented Jan 16, 2017

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.

Copy link

atalebagha commented Jan 25, 2017

what font is that in the gif image?

@atalebagha

This comment has been minimized.

Copy link

atalebagha commented Jan 25, 2017

also can you use emmet with css module class names?

@glennreyes

This comment has been minimized.

Copy link

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.

Copy link

suweya commented Jan 30, 2017

Good! It's work

@guojindai

This comment has been minimized.

Copy link

guojindai commented Feb 12, 2017

it's cool

@ghost

This comment has been minimized.

Copy link

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'
@ghost

This comment has been minimized.

Copy link

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.

Copy link

joel-regen commented Feb 23, 2017

THANKS! works great!

@mohdhazwan

This comment has been minimized.

Copy link

mohdhazwan commented Feb 27, 2017

purely genius. thanks

@saadbinsaeed

This comment has been minimized.

Copy link

saadbinsaeed commented Mar 3, 2017

commendable. Thank you

@shahzeb1

This comment has been minimized.

Copy link

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.

Copy link

a1exlism commented Mar 5, 2017

Really awesome, thx!

@zfaty

This comment has been minimized.

Copy link

zfaty commented Mar 9, 2017

Thank you :)

@hugotox

This comment has been minimized.

Copy link

hugotox commented Mar 16, 2017

Thank you!!

@tennessine

This comment has been minimized.

Copy link

tennessine commented Mar 23, 2017

Thanks a lot :)

@marcofugaro

This comment has been minimized.

Copy link

marcofugaro commented 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!

@waldemirflj

This comment has been minimized.

Copy link

waldemirflj commented Apr 4, 2017

Thank you! <3

@kamina125

This comment has been minimized.

Copy link

kamina125 commented Apr 12, 2017

thanks a bunch!

@chhuang

This comment has been minimized.

Copy link

chhuang commented Apr 13, 2017

Just hit control + e.

@cesargdm

This comment has been minimized.

Copy link

cesargdm commented Apr 30, 2017

Excellent!

@rkimsb2

This comment has been minimized.

Copy link

rkimsb2 commented May 11, 2017

Also work with typescript. Thanks.

@Polypants

This comment has been minimized.

Copy link

Polypants commented May 17, 2017

THANK

@jeffAquinn

This comment has been minimized.

Copy link

jeffAquinn commented May 19, 2017

Great Work and Thank you very much

@philipyoungg

This comment has been minimized.

Copy link

philipyoungg commented May 23, 2017

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

@arteforme

This comment has been minimized.

Copy link

arteforme commented May 25, 2017

Awesome, thanks!

@YehSal

This comment has been minimized.

Copy link

YehSal commented May 25, 2017

Works, thank you!

@podrivo

This comment has been minimized.

Copy link

podrivo commented May 29, 2017

Thanks!

@britstarr

This comment has been minimized.

Copy link

britstarr commented May 30, 2017

Thanks!

@LoicGoyet

This comment has been minimized.

Copy link

LoicGoyet commented May 31, 2017

awesome, thanks !

@designforhuman

This comment has been minimized.

Copy link

designforhuman commented Jun 2, 2017

Thanks!!

@zhulinpinyu

This comment has been minimized.

Copy link

zhulinpinyu commented Jun 28, 2017

Awesome, thanks.

@thecosss

This comment has been minimized.

Copy link

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.

Copy link

suncn commented Sep 6, 2017

thank you very much

@triyanarief

This comment has been minimized.

Copy link

triyanarief commented Oct 6, 2017

wow thank you!

@pakman198

This comment has been minimized.

Copy link

pakman198 commented 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 ?

@kalm42

This comment has been minimized.

Copy link

kalm42 commented Oct 22, 2017

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

@arvinxx

This comment has been minimized.

Copy link

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.

Copy link

ChrisPTY507 commented Oct 30, 2017

worked like a charm. thanks!!!

@magicdawn

This comment has been minimized.

Copy link

magicdawn commented Nov 17, 2017

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

@Bokzan

This comment has been minimized.

Copy link

Bokzan commented Nov 29, 2017

Thanks!

@sumankharel

This comment has been minimized.

Copy link

sumankharel commented Jan 2, 2018

Great! Thanks

@BenGedi

This comment has been minimized.

Copy link

BenGedi commented Jan 5, 2018

thanks!

@mmagdiel

This comment has been minimized.

Copy link

mmagdiel commented Jan 6, 2018

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

@tomholford

This comment has been minimized.

Copy link

tomholford commented Feb 4, 2018

❤️

@a-eid

This comment has been minimized.

Copy link

a-eid commented Feb 5, 2018

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

@audrius59

This comment has been minimized.

Copy link

audrius59 commented Feb 20, 2018

Works great thank's!

@jeromelachaud

This comment has been minimized.

Copy link

jeromelachaud commented Jul 7, 2018

Super useful! Many thanks!!

@jesorstaff

This comment has been minimized.

Copy link

jesorstaff commented Jul 31, 2018

Thank's!!!

@baaswietse

This comment has been minimized.

Copy link

baaswietse commented Sep 4, 2018

Thank you sir!

@ala4fadeel

This comment has been minimized.

Copy link

ala4fadeel commented Oct 14, 2018

Install react package. From Packages menu -> Setting View ->Install Packages/Themes. In the search input box type: react ; and press Enter key. Install react.js package and you are good to go.

@ronallensmith

This comment has been minimized.

Copy link

ronallensmith commented Oct 24, 2018

Awesome!! Thank you. I was looking all over for this. :)

@fonziemedia

This comment has been minimized.

Copy link

fonziemedia commented Nov 13, 2018

Thanks a lot for this!

Just a quick note for anyone having trouble getting this to work: as @ala4fadeel pointed out this requires the react.js package. Also, I had to restart Atom and disable/re-enable the react.js package to get this to work.

Cheers!

@Flaex

This comment has been minimized.

Copy link

Flaex commented Dec 7, 2018

Thanks a lot!!

@gjmcgough

This comment has been minimized.

Copy link

gjmcgough commented Feb 12, 2019

I love you.

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