Skip to content

Instantly share code, notes, and snippets.

@wesbos
Created November 16, 2015 19:33
Show Gist options
  • Save wesbos/2bb4a6998635df97c748 to your computer and use it in GitHub Desktop.
Save wesbos/2bb4a6998635df97c748 to your computer and use it in GitHub Desktop.
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"
}
]
}
@ahmadawais
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
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
Copy link

@jleee Works for me Thanks :)

@AeroKir
Copy link

AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

@syampolskiy
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
Copy link

Nice 👍

@javiermoli
Copy link

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

@rohanBagchi
Copy link

Works just fine. Thanks. 👍

@ezequiellagos
Copy link

Funciona genial! Muchas gracias!

@vuducmanh11
Copy link

Thanks

@tausifpatel
Copy link

This is awesome, thanks

@tamtm
Copy link

tamtm commented Jul 31, 2018

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

@Jamia7866286
Copy link

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

@Jamia7866286
Copy link

any one give me idea how to add

@danpatil
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
Copy link

Great

@TorvaldsDB
Copy link

Thank you very much. Happy sublime again.

@maxmckenzie
Copy link

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"

@dalthonmh
Copy link

thanks! it works

@kihlstrom
Copy link

Thank you!

@andrewstepanets
Copy link

Thank you!!!!

@Miroslavetsh
Copy link

Thanks a million

@hillonyechekwa
Copy link

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.

@japalo
Copy link

japalo commented Sep 8, 2020

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

@MrJuanGaviriaK
Copy link

Thanks!!

@brachkow
Copy link

Not working

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