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 ravenvn commented Nov 22, 2015

Many thanks, brother 👍

@xwartz

This comment has been minimized.

Copy link

@xwartz xwartz commented Nov 25, 2015

Good job!

@aaronSig

This comment has been minimized.

Copy link

@aaronSig aaronSig commented Dec 4, 2015

Hero! Thanks

@kuzvac

This comment has been minimized.

Copy link

@kuzvac kuzvac commented Jan 5, 2016

You Rock! Thanks

@calvinfu1128

This comment has been minimized.

Copy link

@calvinfu1128 calvinfu1128 commented Jan 16, 2016

this is awesome, thanks

@crapthings

This comment has been minimized.

Copy link

@crapthings crapthings commented Jan 21, 2016

Yeah +1

@kennyklee

This comment has been minimized.

Copy link

@kennyklee kennyklee commented Feb 20, 2016

You da man! Enjoying your course.

@docmars

This comment has been minimized.

Copy link

@docmars docmars commented Feb 27, 2016

This is fantastic. Thanks for the share :) 💯

@mtranggit

This comment has been minimized.

Copy link

@mtranggit mtranggit commented Feb 28, 2016

Wonderful! Thank you so much.

@minmaxflow

This comment has been minimized.

Copy link

@minmaxflow minmaxflow commented Mar 7, 2016

thanks for the share。Great Job

@mervynyang

This comment has been minimized.

Copy link

@mervynyang mervynyang commented Mar 14, 2016

good job, thanks.

@evturn

This comment has been minimized.

Copy link

@evturn evturn commented Mar 16, 2016

😭 Thank you 😭

@dyf19118

This comment has been minimized.

Copy link

@dyf19118 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 e2goon commented Apr 12, 2016

👍

@nelreina

This comment has been minimized.

Copy link

@nelreina nelreina commented Apr 12, 2016

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

@duduindo

This comment has been minimized.

Copy link

@duduindo duduindo commented Apr 14, 2016

<lol> Thanks! </lol>

@MeishanGuo

This comment has been minimized.

Copy link

@MeishanGuo MeishanGuo commented Apr 24, 2016

pft!!

@zachrnolan

This comment has been minimized.

Copy link

@zachrnolan 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 santa4u89 commented May 25, 2016

Amazing, thanks a lot! :)

@cameronroe

This comment has been minimized.

Copy link

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

@fixmysync

This comment has been minimized.

Copy link

@fixmysync fixmysync commented Jun 8, 2016

Thanks Wes!!

@AEKurt

This comment has been minimized.

Copy link

@AEKurt AEKurt commented Jun 30, 2016

Thanks a lot 👍

@fifiteen82726

This comment has been minimized.

Copy link

@fifiteen82726 fifiteen82726 commented Jul 16, 2016

Thanks! very useful!

@p2yang

This comment has been minimized.

Copy link

@p2yang p2yang commented Aug 23, 2016

Thanks! It's great!

@femontanha

This comment has been minimized.

Copy link

@femontanha femontanha commented Sep 17, 2016

Thanks a lot man!

@giordancodes

This comment has been minimized.

Copy link

@giordancodes giordancodes commented Oct 14, 2016

ridiculously useful as always Wes!

@thangkieu

This comment has been minimized.

Copy link

@thangkieu thangkieu commented Oct 18, 2016

Many Thanks Bro

@gabrieli

This comment has been minimized.

Copy link

@gabrieli gabrieli commented Oct 19, 2016

Hero! Thanks!

@joeSaad

This comment has been minimized.

Copy link

@joeSaad joeSaad commented Oct 24, 2016

works great! Thank you 👍

@ghost

This comment has been minimized.

Copy link

@ghost 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 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 pixelcure commented Dec 9, 2016

Wes Bos The God! Thank you!

@fraoucene

This comment has been minimized.

Copy link

@fraoucene fraoucene commented Jan 2, 2017

thnks 💯

@vuau

This comment has been minimized.

Copy link

@vuau vuau commented Jan 19, 2017

👍

@dez02

This comment has been minimized.

Copy link

@dez02 dez02 commented Jan 29, 2017

thanks a lot for the share:)

@e2goon

This comment has been minimized.

Copy link

@e2goon e2goon commented Feb 5, 2017

👍

@seblondono

This comment has been minimized.

Copy link

@seblondono 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 kara22 commented Mar 20, 2017

Great ! thanks a lot for the share

@nguyenthaison

This comment has been minimized.

Copy link

@nguyenthaison nguyenthaison commented Apr 5, 2017

Thanks

@uidoyen

This comment has been minimized.

Copy link

@uidoyen uidoyen commented Apr 12, 2017

Thanks!

@justinwjoyce

This comment has been minimized.

Copy link

@justinwjoyce 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 MrStronger commented May 14, 2017

I love you so much!

@nosdoska

This comment has been minimized.

Copy link

@nosdoska nosdoska commented May 31, 2017

Pretty awesome! Works like a charm!

@theo-bittencourt

This comment has been minimized.

Copy link

@theo-bittencourt 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 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 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 majidzeno commented Oct 14, 2017

@jleee Works for me Thanks :)

@AeroKir

This comment has been minimized.

Copy link

@AeroKir AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

@syampolskiy

This comment has been minimized.

Copy link

@syampolskiy 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 azeemmohd commented Nov 25, 2017

Nice 👍

@javiermoli

This comment has been minimized.

Copy link

@javiermoli 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 rohanBagchi commented Jan 18, 2018

Works just fine. Thanks. 👍

@ezequiellagos

This comment has been minimized.

Copy link

@ezequiellagos ezequiellagos commented Feb 7, 2018

Funciona genial! Muchas gracias!

@vuducmanh11

This comment has been minimized.

Copy link

@vuducmanh11 vuducmanh11 commented Apr 10, 2018

Thanks

@tausifpatel

This comment has been minimized.

Copy link

@tausifpatel tausifpatel commented May 13, 2018

This is awesome, thanks

@tamtm

This comment has been minimized.

Copy link

@tamtm tamtm commented Jul 31, 2018

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

@Jamia7866286

This comment has been minimized.

Copy link

@Jamia7866286 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 Jamia7866286 commented Dec 19, 2018

any one give me idea how to add

@danpatil

This comment has been minimized.

Copy link

@danpatil 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 nnt25251325 commented Jan 9, 2019

Great

@TorvaldsDB

This comment has been minimized.

Copy link

@TorvaldsDB TorvaldsDB commented May 26, 2019

Thank you very much. Happy sublime again.

@maxmckenzie

This comment has been minimized.

Copy link

@maxmckenzie 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 D4ITON commented Aug 26, 2019

thanks! it works

@kihlstrom

This comment has been minimized.

Copy link

@kihlstrom kihlstrom commented Nov 29, 2019

Thank you!

@andrewstepanets

This comment has been minimized.

Copy link

@andrewstepanets andrewstepanets commented Mar 31, 2020

Thank you!!!!

@Miroslavetsh

This comment has been minimized.

Copy link

@Miroslavetsh Miroslavetsh commented Jul 12, 2020

Thanks a million

@hillonyechekwa

This comment has been minimized.

Copy link

@hillonyechekwa hillonyechekwa commented Sep 8, 2020

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

This comment has been minimized.

Copy link

@japalo 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

This comment has been minimized.

Copy link

@MrJuanGaviriaK MrJuanGaviriaK commented Apr 23, 2021

Thanks!!

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