Skip to content

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.

Copy link

ravenvn commented Nov 22, 2015

Many thanks, brother 👍

@xwartz

This comment has been minimized.

Copy link

xwartz commented Nov 25, 2015

Good job!

@aaronSig

This comment has been minimized.

Copy link

aaronSig commented Dec 4, 2015

Hero! Thanks

@kuzvac

This comment has been minimized.

Copy link

kuzvac commented Jan 5, 2016

You Rock! Thanks

@calvinfu1128

This comment has been minimized.

Copy link

calvinfu1128 commented Jan 16, 2016

this is awesome, thanks

@crapthings

This comment has been minimized.

Copy link

crapthings commented Jan 21, 2016

Yeah +1

@kennyklee

This comment has been minimized.

Copy link

kennyklee commented Feb 20, 2016

You da man! Enjoying your course.

@docmars

This comment has been minimized.

Copy link

docmars commented Feb 27, 2016

This is fantastic. Thanks for the share :) 💯

@mtranggit

This comment has been minimized.

Copy link

mtranggit commented Feb 28, 2016

Wonderful! Thank you so much.

@minmaxflow

This comment has been minimized.

Copy link

minmaxflow commented Mar 7, 2016

thanks for the share。Great Job

@mervynyang

This comment has been minimized.

Copy link

mervynyang commented Mar 14, 2016

good job, thanks.

@evturn

This comment has been minimized.

Copy link

evturn commented Mar 16, 2016

😭 Thank you 😭

@dyf19118

This comment has been minimized.

Copy link

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.

Copy link

e2goon commented Apr 12, 2016

👍

@nelreina

This comment has been minimized.

Copy link

nelreina commented Apr 12, 2016

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

@duduindo

This comment has been minimized.

Copy link

duduindo commented Apr 14, 2016

<lol> Thanks! </lol>

@MeishanGuo

This comment has been minimized.

Copy link

MeishanGuo commented Apr 24, 2016

pft!!

@zachrnolan

This comment has been minimized.

Copy link

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.

Copy link

santa4u89 commented May 25, 2016

Amazing, thanks a lot! :)

@cameronroe

This comment has been minimized.

Copy link

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.

Copy link

MandyMadeThis commented Jun 8, 2016

Thanks Wes!!

@AEKurt

This comment has been minimized.

Copy link

AEKurt commented Jun 30, 2016

Thanks a lot 👍

@fifiteen82726

This comment has been minimized.

Copy link

fifiteen82726 commented Jul 16, 2016

Thanks! very useful!

@p2yang

This comment has been minimized.

Copy link

p2yang commented Aug 23, 2016

Thanks! It's great!

@femontanha

This comment has been minimized.

Copy link

femontanha commented Sep 17, 2016

Thanks a lot man!

@giordancodes

This comment has been minimized.

Copy link

giordancodes commented Oct 14, 2016

ridiculously useful as always Wes!

@thangkieu

This comment has been minimized.

Copy link

thangkieu commented Oct 18, 2016

Many Thanks Bro

@gabrieli

This comment has been minimized.

Copy link

gabrieli commented Oct 19, 2016

Hero! Thanks!

@joeSaad

This comment has been minimized.

Copy link

joeSaad commented Oct 24, 2016

works great! Thank you 👍

@ghost

This comment has been minimized.

Copy link

ghost commented Oct 26, 2016

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

@xgqfrms-GitHub

This comment has been minimized.

Copy link

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.

Copy link

pixelcure commented Dec 9, 2016

Wes Bos The God! Thank you!

@firadz

This comment has been minimized.

Copy link

firadz commented Jan 2, 2017

thnks 💯

@phamvuau

This comment has been minimized.

Copy link

phamvuau commented Jan 19, 2017

👍

@dez02

This comment has been minimized.

Copy link

dez02 commented Jan 29, 2017

thanks a lot for the share:)

@e2goon

This comment has been minimized.

Copy link

e2goon commented Feb 5, 2017

👍

@seblondono

This comment has been minimized.

Copy link

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.

Copy link

kara22 commented Mar 20, 2017

Great ! thanks a lot for the share

@nguyenthaison

This comment has been minimized.

Copy link

nguyenthaison commented Apr 5, 2017

Thanks

@uidoyen

This comment has been minimized.

Copy link

uidoyen commented Apr 12, 2017

Thanks!

@justinwjoyce

This comment has been minimized.

Copy link

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.

Copy link

MrStronger commented May 14, 2017

I love you so much!

@dazjavier

This comment has been minimized.

Copy link

dazjavier commented May 31, 2017

Pretty awesome! Works like a charm!

@theo-bittencourt

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

majidzeno commented Oct 14, 2017

@jleee Works for me Thanks :)

@AeroKir

This comment has been minimized.

Copy link

AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

@syampolskiy

This comment has been minimized.

Copy link

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.

Copy link

azeemmohd commented Nov 25, 2017

Nice 👍

@javiermoli

This comment has been minimized.

Copy link

javiermoli commented Dec 17, 2017

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

@rohanBagchi

This comment has been minimized.

Copy link

rohanBagchi commented Jan 18, 2018

Works just fine. Thanks. 👍

@ezequiellagos

This comment has been minimized.

Copy link

ezequiellagos commented Feb 7, 2018

Funciona genial! Muchas gracias!

@vuducmanh11

This comment has been minimized.

Copy link

vuducmanh11 commented Apr 10, 2018

Thanks

@tausifpatel

This comment has been minimized.

Copy link

tausifpatel commented May 13, 2018

This is awesome, thanks

@tamtm

This comment has been minimized.

Copy link

tamtm commented Jul 31, 2018

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

@Jamia7866286

This comment has been minimized.

Copy link

Jamia7866286 commented Dec 19, 2018

good...
But how to add in sublime pls give me response as soon as possible....

@Jamia7866286

This comment has been minimized.

Copy link

Jamia7866286 commented Dec 19, 2018

any one give me idea how to add

@danpatil

This comment has been minimized.

Copy link

danpatil commented Jan 4, 2019

I am using vs code and tried it first but did not work. if someone is facing issue while they have added the binding the way Wes has told
just make sure you do this setting.

code=>preference=>settings=> user.settings

just add this code snippet in between your curly braces

"emmet.includeLanguages": { "javascript": "javascriptreact" }

save and make sure you follow what Wes has done in the video and you will be on your way.

@nnt25251325

This comment has been minimized.

Copy link

nnt25251325 commented Jan 9, 2019

Great

@TorvaldsDB

This comment has been minimized.

Copy link

TorvaldsDB commented May 26, 2019

Thank you very much. Happy sublime again.

@maxmckenzie

This comment has been minimized.

Copy link

maxmckenzie commented Aug 6, 2019

I needed to include typescript so i used "operand": "meta.block.tsx, source.tsx, source.jsx, source.js, meta.group.braces.round.js, text.html"

@D4ITON

This comment has been minimized.

Copy link

D4ITON commented Aug 26, 2019

thanks! it works

@kihlstrom

This comment has been minimized.

Copy link

kihlstrom commented Nov 29, 2019

Thank you!

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.