Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to properly get a TAB trigger working with Emmet inside of JSX
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
"operand": "meta.group.braces.round.js, text.html",
"operator": "equal",
"match_all": true,
"key": "selector"
},
// run only if there's no selected text
{
"match_all": true,
"key": "selection_empty"
},
// don't work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
},
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
},
{
"match_all": true,
"key": "is_abbreviation"
}
]
}
@ravenvn

This comment has been minimized.

ravenvn commented Nov 22, 2015

Many thanks, brother 👍

@xwartz

This comment has been minimized.

xwartz commented Nov 25, 2015

Good job!

@aaronSig

This comment has been minimized.

aaronSig commented Dec 4, 2015

Hero! Thanks

@kuzvac

This comment has been minimized.

kuzvac commented Jan 5, 2016

You Rock! Thanks

@calvinfu1128

This comment has been minimized.

calvinfu1128 commented Jan 16, 2016

this is awesome, thanks

@crapthings

This comment has been minimized.

crapthings commented Jan 21, 2016

Yeah +1

@kennyklee

This comment has been minimized.

kennyklee commented Feb 20, 2016

You da man! Enjoying your course.

@docmars

This comment has been minimized.

docmars commented Feb 27, 2016

This is fantastic. Thanks for the share :) 💯

@mtranggit

This comment has been minimized.

mtranggit commented Feb 28, 2016

Wonderful! Thank you so much.

@minmaxflow

This comment has been minimized.

minmaxflow commented Mar 7, 2016

thanks for the share。Great Job

@mervynyang

This comment has been minimized.

mervynyang commented Mar 14, 2016

good job, thanks.

@evturn

This comment has been minimized.

evturn commented Mar 16, 2016

😭 Thank you 😭

@dyf19118

This comment has been minimized.

dyf19118 commented Apr 12, 2016

I found it doesn't work for me as ST2.02 cannot get the right scope 'meta.group.braces.round.js'. It got 'meta.brace.round.js' instead and once cursor is not right beside to brace, just like

var CommentBox = React.createClass({
    render: function() {
        return (
            // cursor is now here
        )
    }
});

it get scope 'source.js'.
Then i have a try on ST3, it works well but get scope 'meta.group.braces.round' without the '.js' extension.
I wonder if this inconsistent behavior has an relation to OS. (I am using windows 10).

@e2goon

This comment has been minimized.

e2goon commented Apr 12, 2016

👍

@nelreina

This comment has been minimized.

nelreina commented Apr 12, 2016

Awesome !!!!!!!! Thank you very much

@duduindo

This comment has been minimized.

duduindo commented Apr 14, 2016

<lol> Thanks! </lol>

@MeishanGuo

This comment has been minimized.

MeishanGuo commented Apr 24, 2016

pft!!

@zachrnolan

This comment has been minimized.

zachrnolan commented May 11, 2016

I'm copying the code into "Default (OSX).sublime-keymap" and it's still not expanding with tabs within the render function.

I'm using sublime text 3 (build 3103) and have restarted Sublime multiple times. Not receiving any errors.

Any ideas?

EDIT: Fixed the issue, I was missing the enclosing brackets around the code. In case anyone else has issues, don't just copy paste this code into the settings file. You need to leave the existing brackets in there.

@santa4u89

This comment has been minimized.

santa4u89 commented May 25, 2016

Amazing, thanks a lot! :)

@cameronroe

This comment has been minimized.

cameronroe commented Jun 7, 2016

It's not expanding className. Using "operand": "source.js.jsx, source.js, text.html", and ES6 class for the component - returns braces.

@MandyMadeThis

This comment has been minimized.

MandyMadeThis commented Jun 8, 2016

Thanks Wes!!

@AEKurt

This comment has been minimized.

AEKurt commented Jun 30, 2016

Thanks a lot 👍

@fifiteen82726

This comment has been minimized.

fifiteen82726 commented Jul 16, 2016

Thanks! very useful!

@p2yang

This comment has been minimized.

p2yang commented Aug 23, 2016

Thanks! It's great!

@femontanha

This comment has been minimized.

femontanha commented Sep 17, 2016

Thanks a lot man!

@giordancodes

This comment has been minimized.

giordancodes commented Oct 14, 2016

ridiculously useful as always Wes!

@thangkieu

This comment has been minimized.

thangkieu commented Oct 18, 2016

Many Thanks Bro

@gabrieli

This comment has been minimized.

gabrieli commented Oct 19, 2016

Hero! Thanks!

@joeSaad

This comment has been minimized.

joeSaad commented Oct 24, 2016

works great! Thank you 👍

@ghost

This comment has been minimized.

ghost commented Oct 26, 2016

Thanks heaps for this! Gosh i'm so happy right now.

@xgqfrms-GitHub

This comment has been minimized.

xgqfrms-GitHub commented Nov 17, 2016

pretty cool!

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "meta.group.braces.round.js, text.html", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 

    // run only if there's no selected text
    {
      "match_all": true, 
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section
    {
      "operand": false, 
      "operator": "equal", 
      "match_all": true, 
      "key": "auto_complete_visible"
    }, 
    {
      "match_all": true, 
      "key": "is_abbreviation"
    }
  ]
}

https://www.youtube.com/watch?v=JTHM077EHbI

@pixelcure

This comment has been minimized.

pixelcure commented Dec 9, 2016

Wes Bos The God! Thank you!

@firadz

This comment has been minimized.

firadz commented Jan 2, 2017

thnks 💯

@phamvuau

This comment has been minimized.

phamvuau commented Jan 19, 2017

👍

@dez02

This comment has been minimized.

dez02 commented Jan 29, 2017

thanks a lot for the share:)

@e2goon

This comment has been minimized.

e2goon commented Feb 5, 2017

👍

@seblondono

This comment has been minimized.

seblondono commented Feb 5, 2017

Just in case there is anyone working with Atom, here is how to set Emmet to work with JSX and Tab https://gist.github.com/mxstbr/361ddb22057f0a01762240be209321f0

So awesome! I feel like The Flash now! ⚡️

@kara22

This comment has been minimized.

kara22 commented Mar 20, 2017

Great ! thanks a lot for the share

@nguyenthaison

This comment has been minimized.

nguyenthaison commented Apr 5, 2017

Thanks

@uidoyen

This comment has been minimized.

uidoyen commented Apr 12, 2017

Thanks!

@justinwjoyce

This comment has been minimized.

justinwjoyce commented May 3, 2017

This is not working for me. I added the code to Default (OSX).sublime-keymap -- Use and saved. I go back to the code and type div or ul then tab and it does not autcomplete. Any suggestions por favor?

@MrStronger

This comment has been minimized.

MrStronger commented May 14, 2017

I love you so much!

@dazjavier

This comment has been minimized.

dazjavier commented May 31, 2017

Pretty awesome! Works like a charm!

@theo-bittencourt

This comment has been minimized.

theo-bittencourt commented Jun 1, 2017

Is someone receiving that exception in Sublime console?

Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 818, in run_
    return self.run(edit)
  File "emmet-plugin in /Users/theo/Library/Application Support/Sublime Text 3/Installed Packages/Emmet.sublime-package", line 476, in run
  File "emmet-plugin in /Users/theo/Library/Application Support/Sublime Text 3/Installed Packages/Emmet.sublime-package", line 456, in expand_by_tab
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime.py", line 879, in score_selector
    return sublime_api.view_score_selector(self.view_id, pt, selector)
TypeError: String required

My suspect is the auto_complete_selector pref in Preferences.sublime-settings.
Could a good man/girl paste this setting value here? :)


SOLVED

The mistake was in disable_tab_abbreviations_for_scopes Emmet's setting.
I was passing an array instead string.

@ahmadawais

This comment has been minimized.

ahmadawais commented Sep 21, 2017

Make sure you read the comments in there.

I had to comment out the last part to make it work.

            // don't work if completion popup is visible and you
	    // want to insert completion with Tab. If you want to
	    // expand Emmet with Tab even if popup is visible --
	    // remove this section
	    // {
	    //   "operand": false,
	    //   "operator": "equal",
	    //   "match_all": true,
	    //   "key": "auto_complete_visible"
	    // },
	    // {
	    //   "match_all": true,
	    //   "key": "is_abbreviation"
	    // }
@jleee

This comment has been minimized.

jleee commented Oct 2, 2017

For anyone experiencing an issue with the tabbing, try this:

Change:
"operand": "meta.group.braces.round.js, text.html",

To:
"operand": "source.js, text.html",

@majidzeno

This comment has been minimized.

majidzeno commented Oct 14, 2017

@jleee Works for me Thanks :)

@AeroKir

This comment has been minimized.

AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

@syampolskiy

This comment has been minimized.

syampolskiy commented Oct 29, 2017

thanks for code, but for me it works only after the second tab pressing. after the first one Sublime suggests me to put React functions. here is the example http://prntscr.com/h3m9ik
how to disable it?

here is the list of installed packages:

Babel/
'Babel Snippets'/
backrefs/
ColorPicker/
'Emmet Css Snippets'/
'Emmet Style Reflector'/
FixMyJS/
'HTML-CSS-JS Prettify'/
'Jasmine JS'/
'JavaScript Completions'/
JSHint/
markupsafe/
mdpopups/
pygments/
pymdownx/
python-jinja2/
python-markdown/
PyV8/
pyyaml/
SublimeCodeIntel/
SublimeLinter/
SublimeLinter-contrib-es
User/
'zzz A File Icon zzz'/

@azeemmohd

This comment has been minimized.

azeemmohd commented Nov 25, 2017

Nice 👍

@javiermoli

This comment has been minimized.

javiermoli commented Dec 17, 2017

I need to use in Atom. How i use it?
Thank!

@rohanBagchi

This comment has been minimized.

rohanBagchi commented Jan 18, 2018

Works just fine. Thanks. 👍

@ezequiellagos

This comment has been minimized.

ezequiellagos commented Feb 7, 2018

Funciona genial! Muchas gracias!

@vuducmanh11

This comment has been minimized.

vuducmanh11 commented Apr 10, 2018

Thanks

@tausifpatel

This comment has been minimized.

tausifpatel commented May 13, 2018

This is awesome, thanks

@tamtm

This comment has been minimized.

tamtm commented Jul 31, 2018

beware of square bracket '[ ]' in keybinding config file

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