How to properly get a TAB trigger working with Emmet inside of JSX

tab-trigger.js

{
  "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"
    }
  ]
}

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

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 Works for me Thanks :)

Hello! It's very helped. Thank!

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

Nice 👍

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

Works just fine. Thanks. 👍

Funciona genial! Muchas gracias!

Thanks

This is awesome, thanks

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

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

any one give me idea how to add

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.

Great

Thank you very much. Happy sublime again.

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"

thanks! it works

Thank you!

Thank you!!!!

Thanks a million

it's not working for me. I use linux and i don't think this settings work for sublime on linux. I've tried everything - typing by hand, copying and pasting and even following the video tutorial but it still doesn't work.

Same here, something seems to be updated and i cannot get the tab function to work. It works for shift+f5 though. Also there seems to be an update in naming. My config:

	{
		"keys": ["tab", "shift+f5"],
		"command": "emmet_expand_abbreviation",
		"args": { "tab": true },
		"context": [
			{
				"operand": "meta.block.tsx, 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"
			}
		]
	},

Thanks!!

Not working