Skip to content

Instantly share code, notes, and snippets.

@mxstbr mxstbr/Readme.md
Last active Jul 21, 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

commented May 9, 2016

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

@duivvv

This comment has been minimized.

Copy link

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

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

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

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

commented May 10, 2016

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

@andrewcoelho

This comment has been minimized.

Copy link

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

commented Jun 23, 2016

@duivvv Thanks!!!

@lynkxyz

This comment has been minimized.

Copy link

commented Aug 9, 2016

How to make className like this, i very like this

@aarow

This comment has been minimized.

Copy link

commented Sep 21, 2016

great font italics. What is this fontface?

@irvingv8

This comment has been minimized.

Copy link

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

commented Oct 23, 2016

@AlexKvazos

This comment has been minimized.

Copy link

commented Oct 25, 2016

@andrewcoelho where you able to fix the css issue?

@abooayoob

This comment has been minimized.

Copy link

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

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

commented Nov 30, 2016

Nice! Thank you.

@kokokele

This comment has been minimized.

Copy link

commented Dec 16, 2016

cool , thx

@nilsynils

This comment has been minimized.

Copy link

commented Dec 16, 2016

Thank you!

@krabbypattified

This comment has been minimized.

Copy link

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

commented Dec 31, 2016

Thanks!

@denskiz

This comment has been minimized.

Copy link

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

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

commented Jan 25, 2017

what font is that in the gif image?

@atalebagha

This comment has been minimized.

Copy link

commented Jan 25, 2017

also can you use emmet with css module class names?

@glennreyes

This comment has been minimized.

Copy link

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

commented Jan 30, 2017

Good! It's work

@guojindai

This comment has been minimized.

Copy link

commented Feb 12, 2017

it's cool

@ghost

This comment has been minimized.

Copy link

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

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

commented Feb 23, 2017

THANKS! works great!

@mohdhazwan

This comment has been minimized.

Copy link

commented Feb 27, 2017

purely genius. thanks

@saadbinsaeed

This comment has been minimized.

Copy link

commented Mar 3, 2017

commendable. Thank you

@shahzeb1

This comment has been minimized.

Copy link

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

commented Mar 5, 2017

Really awesome, thx!

@zfaty

This comment has been minimized.

Copy link

commented Mar 9, 2017

Thank you :)

@hugotox

This comment has been minimized.

Copy link

commented Mar 16, 2017

Thank you!!

@tennessine

This comment has been minimized.

Copy link

commented Mar 23, 2017

Thanks a lot :)

@marcofugaro

This comment has been minimized.

Copy link

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

commented Apr 4, 2017

Thank you! <3

@ghost

This comment has been minimized.

Copy link

commented Apr 12, 2017

thanks a bunch!

@chhuang

This comment has been minimized.

Copy link

commented Apr 13, 2017

Just hit control + e.

@cesargdm

This comment has been minimized.

Copy link

commented Apr 30, 2017

Excellent!

@rkimsb2

This comment has been minimized.

Copy link

commented May 11, 2017

Also work with typescript. Thanks.

@Polypants

This comment has been minimized.

Copy link

commented May 17, 2017

THANK

@jeffAquinn

This comment has been minimized.

Copy link

commented May 19, 2017

Great Work and Thank you very much

@philipyoungg

This comment has been minimized.

Copy link

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

commented May 25, 2017

Awesome, thanks!

@YehSal

This comment has been minimized.

Copy link

commented May 25, 2017

Works, thank you!

@podrivo

This comment has been minimized.

Copy link

commented May 29, 2017

Thanks!

@britstarr

This comment has been minimized.

Copy link

commented May 30, 2017

Thanks!

@LoicGoyet

This comment has been minimized.

Copy link

commented May 31, 2017

awesome, thanks !

@designforhuman

This comment has been minimized.

Copy link

commented Jun 2, 2017

Thanks!!

@zhulinpinyu

This comment has been minimized.

Copy link

commented Jun 28, 2017

Awesome, thanks.

@thecosss

This comment has been minimized.

Copy link

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

commented Sep 6, 2017

thank you very much

@triyanarief

This comment has been minimized.

Copy link

commented Oct 6, 2017

wow thank you!

@pakman198

This comment has been minimized.

Copy link

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

commented Oct 22, 2017

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

@arvinxx

This comment has been minimized.

Copy link

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

commented Oct 30, 2017

worked like a charm. thanks!!!

@magicdawn

This comment has been minimized.

Copy link

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

commented Nov 29, 2017

Thanks!

@sumankharel

This comment has been minimized.

Copy link

commented Jan 2, 2018

Great! Thanks

@BenGedi

This comment has been minimized.

Copy link

commented Jan 5, 2018

thanks!

@mmagdiel

This comment has been minimized.

Copy link

commented Jan 6, 2018

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

@tomholford

This comment has been minimized.

Copy link

commented Feb 4, 2018

❤️

@a-eid

This comment has been minimized.

Copy link

commented Feb 5, 2018

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

@audrius59

This comment has been minimized.

Copy link

commented Feb 20, 2018

Works great thank's!

@jeromelachaud

This comment has been minimized.

Copy link

commented Jul 7, 2018

Super useful! Many thanks!!

@jesorstaff

This comment has been minimized.

Copy link

commented Jul 31, 2018

Thank's!!!

@baaswietse

This comment has been minimized.

Copy link

commented Sep 4, 2018

Thank you sir!

@ala4fadeel

This comment has been minimized.

Copy link

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

commented Oct 24, 2018

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

@fonziemedia

This comment has been minimized.

Copy link

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

commented Dec 7, 2018

Thanks a lot!!

@gjmcgough

This comment has been minimized.

Copy link

commented Feb 12, 2019

I love you.

@ndemianc

This comment has been minimized.

Copy link

commented Apr 13, 2019

Great!

@iloveip

This comment has been minimized.

Copy link

commented May 15, 2019

Thank you very much! I also had to install react package, but I get the following warning:

Incompatible Package Detected
language-babel has detected the presence of an incompatible Atom package named 'react'. 
 
It is recommended that you disable either 'react' or language-babel 
 
Reason:
 
The Atom community package 'react' (not to be confused 
with Facebook React) monkey patches the atom methods 
that provide autoindent features for JSX. 
As it detects JSX scopes without regard to the grammar being used, 
it tries to auto indent JSX that is highlighted by language-babel. 
As language-babel also attempts to do auto indentation using 
standard atom API's, this creates a potential conflict.

Is there anyway to turn it off?

@Analova

This comment has been minimized.

Copy link

commented Jun 18, 2019

It is not working for me.

@appsparkler

This comment has been minimized.

Copy link

commented Jun 28, 2019

This worked for me. Thanks a lot.

This is what I did:

  1. Install atom package language-babel
  2. Install atom package emmet
  3. Add the following snippet at the top of keymap.cson which is available on File > Keymap in the Atom Toolbar
'atom-text-editor:not([mini])':'tab':'emmet:expand-abbreviation-with-tab'

Good Luck...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.