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