Create a gist now

Instantly share code, notes, and snippets.

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

Show comment
Hide comment
@ravenvn

ravenvn Nov 22, 2015

Many thanks, brother ๐Ÿ‘

ravenvn commented Nov 22, 2015

Many thanks, brother ๐Ÿ‘

@xwartz

This comment has been minimized.

Show comment
Hide comment
@xwartz

xwartz Nov 25, 2015

Good job!

xwartz commented Nov 25, 2015

Good job!

@aaronSig

This comment has been minimized.

Show comment
Hide comment
@aaronSig

aaronSig Dec 4, 2015

Hero! Thanks

aaronSig commented Dec 4, 2015

Hero! Thanks

@kuzvac

This comment has been minimized.

Show comment
Hide comment
@kuzvac

kuzvac Jan 5, 2016

You Rock! Thanks

kuzvac commented Jan 5, 2016

You Rock! Thanks

@calvinfu1128

This comment has been minimized.

Show comment
Hide comment
@calvinfu1128

calvinfu1128 Jan 16, 2016

this is awesome, thanks

this is awesome, thanks

@crapthings

This comment has been minimized.

Show comment
Hide comment
@crapthings

crapthings Jan 21, 2016

Yeah +1

Yeah +1

@kennyklee

This comment has been minimized.

Show comment
Hide comment
@kennyklee

kennyklee Feb 20, 2016

You da man! Enjoying your course.

You da man! Enjoying your course.

@docmars

This comment has been minimized.

Show comment
Hide comment
@docmars

docmars Feb 27, 2016

This is fantastic. Thanks for the share :) ๐Ÿ’ฏ

docmars commented Feb 27, 2016

This is fantastic. Thanks for the share :) ๐Ÿ’ฏ

@mtranggit

This comment has been minimized.

Show comment
Hide comment
@mtranggit

mtranggit Feb 28, 2016

Wonderful! Thank you so much.

Wonderful! Thank you so much.

@minmaxflow

This comment has been minimized.

Show comment
Hide comment
@minmaxflow

minmaxflow Mar 7, 2016

thanks for the shareใ€‚Great Job

thanks for the shareใ€‚Great Job

@mervynyang

This comment has been minimized.

Show comment
Hide comment
@mervynyang

mervynyang Mar 14, 2016

good job, thanks.

good job, thanks.

@evturn

This comment has been minimized.

Show comment
Hide comment
@evturn

evturn Mar 16, 2016

๐Ÿ˜ญ Thank you ๐Ÿ˜ญ

evturn commented Mar 16, 2016

๐Ÿ˜ญ Thank you ๐Ÿ˜ญ

@dyf19118

This comment has been minimized.

Show comment
Hide comment
@dyf19118

dyf19118 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).

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.

Show comment
Hide comment
@e2goon

e2goon Apr 12, 2016

๐Ÿ‘

e2goon commented Apr 12, 2016

๐Ÿ‘

@nelreina

This comment has been minimized.

Show comment
Hide comment
@nelreina

nelreina Apr 12, 2016

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

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

@duduindo

This comment has been minimized.

Show comment
Hide comment
@duduindo

duduindo Apr 14, 2016

<lol> Thanks! </lol>

<lol> Thanks! </lol>

@MeishanGuo

This comment has been minimized.

Show comment
Hide comment
@MeishanGuo

MeishanGuo Apr 24, 2016

pft!!

pft!!

@zachrnolan

This comment has been minimized.

Show comment
Hide comment
@zachrnolan

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

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.

Show comment
Hide comment
@santa4u89

santa4u89 May 25, 2016

Amazing, thanks a lot! :)

Amazing, thanks a lot! :)

@cameronroe

This comment has been minimized.

Show comment
Hide comment
@cameronroe

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

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.

Show comment
Hide comment
@MandyMadeThis

MandyMadeThis Jun 8, 2016

Thanks Wes!!

Thanks Wes!!

@AEKurt

This comment has been minimized.

Show comment
Hide comment
@AEKurt

AEKurt Jun 30, 2016

Thanks a lot ๐Ÿ‘

AEKurt commented Jun 30, 2016

Thanks a lot ๐Ÿ‘

@fifiteen82726

This comment has been minimized.

Show comment
Hide comment
@fifiteen82726

fifiteen82726 Jul 16, 2016

Thanks! very useful!

Thanks! very useful!

@p2yang

This comment has been minimized.

Show comment
Hide comment
@p2yang

p2yang Aug 23, 2016

Thanks! It's great!

p2yang commented Aug 23, 2016

Thanks! It's great!

@femontanha

This comment has been minimized.

Show comment
Hide comment
@femontanha

femontanha Sep 17, 2016

Thanks a lot man!

Thanks a lot man!

@giordancodes

This comment has been minimized.

Show comment
Hide comment
@giordancodes

giordancodes Oct 14, 2016

ridiculously useful as always Wes!

ridiculously useful as always Wes!

@thangkieu

This comment has been minimized.

Show comment
Hide comment
@thangkieu

thangkieu Oct 18, 2016

Many Thanks Bro

Many Thanks Bro

@gabrieli

This comment has been minimized.

Show comment
Hide comment
@gabrieli

gabrieli Oct 19, 2016

Hero! Thanks!

Hero! Thanks!

@joeSaad

This comment has been minimized.

Show comment
Hide comment
@joeSaad

joeSaad Oct 24, 2016

works great! Thank you ๐Ÿ‘

joeSaad commented Oct 24, 2016

works great! Thank you ๐Ÿ‘

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 26, 2016

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

ghost commented Oct 26, 2016

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

@xgqfrms-GitHub

This comment has been minimized.

Show comment
Hide comment
@xgqfrms-GitHub

xgqfrms-GitHub 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

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.

Show comment
Hide comment
@pixelcure

pixelcure Dec 9, 2016

Wes Bos The God! Thank you!

Wes Bos The God! Thank you!

@fraoucene

This comment has been minimized.

Show comment
Hide comment
@fraoucene

fraoucene Jan 2, 2017

thnks ๐Ÿ’ฏ

thnks ๐Ÿ’ฏ

@phamvuau

This comment has been minimized.

Show comment
Hide comment
@phamvuau

phamvuau Jan 19, 2017

๐Ÿ‘

๐Ÿ‘

@dez02

This comment has been minimized.

Show comment
Hide comment
@dez02

dez02 Jan 29, 2017

thanks a lot for the share:)

dez02 commented Jan 29, 2017

thanks a lot for the share:)

@e2goon

This comment has been minimized.

Show comment
Hide comment
@e2goon

e2goon Feb 5, 2017

๐Ÿ‘

e2goon commented Feb 5, 2017

๐Ÿ‘

@seblondono

This comment has been minimized.

Show comment
Hide comment
@seblondono

seblondono 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! โšก๏ธ

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.

Show comment
Hide comment
@kara22

kara22 Mar 20, 2017

Great ! thanks a lot for the share

kara22 commented Mar 20, 2017

Great ! thanks a lot for the share

@nguyenthaison

This comment has been minimized.

Show comment
Hide comment
@nguyenthaison

nguyenthaison Apr 5, 2017

Thanks

Thanks

@uidoyen

This comment has been minimized.

Show comment
Hide comment
@uidoyen

uidoyen Apr 12, 2017

Thanks!

uidoyen commented Apr 12, 2017

Thanks!

@justinwjoyce

This comment has been minimized.

Show comment
Hide comment
@justinwjoyce

justinwjoyce 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?

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.

Show comment
Hide comment
@MrStronger

MrStronger May 14, 2017

I love you so much!

I love you so much!

@dazjavier

This comment has been minimized.

Show comment
Hide comment
@dazjavier

dazjavier May 31, 2017

Pretty awesome! Works like a charm!

dazjavier commented May 31, 2017

Pretty awesome! Works like a charm!

@theo-bittencourt

This comment has been minimized.

Show comment
Hide comment
@theo-bittencourt

theo-bittencourt 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.

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.

Show comment
Hide comment
@ahmadawais

ahmadawais 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"
	    // }

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.

Show comment
Hide comment
@jleee

jleee 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",

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.

Show comment
Hide comment
@majidzeno

majidzeno Oct 14, 2017

@jleee Works for me Thanks :)

@jleee Works for me Thanks :)

@AeroKir

This comment has been minimized.

Show comment
Hide comment
@AeroKir

AeroKir Oct 17, 2017

Hello! It's very helped. Thank!

AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

@syampolskiy

This comment has been minimized.

Show comment
Hide comment
@syampolskiy

syampolskiy 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'/

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.

Show comment
Hide comment
@azeemmohd

azeemmohd Nov 25, 2017

Nice ๐Ÿ‘

Nice ๐Ÿ‘

@javiermoli

This comment has been minimized.

Show comment
Hide comment
@javiermoli

javiermoli Dec 17, 2017

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

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

@rohanBagchi

This comment has been minimized.

Show comment
Hide comment
@rohanBagchi

rohanBagchi Jan 18, 2018

Works just fine. Thanks. ๐Ÿ‘

Works just fine. Thanks. ๐Ÿ‘

@ezequiellagos

This comment has been minimized.

Show comment
Hide comment
@ezequiellagos

ezequiellagos Feb 7, 2018

Funciona genial! Muchas gracias!

Funciona genial! Muchas gracias!

@vuducmanh11

This comment has been minimized.

Show comment
Hide comment
@vuducmanh11

vuducmanh11 Apr 10, 2018

Thanks

Thanks

@tausifpatel

This comment has been minimized.

Show comment
Hide comment
@tausifpatel

tausifpatel May 13, 2018

This is awesome, thanks

This is awesome, thanks

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