Create a gist now

Instantly share code, notes, and snippets.

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

Many thanks, brother πŸ‘

xwartz commented Nov 25, 2015

Good job!

aaronSig commented Dec 4, 2015

Hero! Thanks

kuzvac commented Jan 5, 2016

You Rock! Thanks

this is awesome, thanks

Yeah +1

You da man! Enjoying your course.

docmars commented Feb 27, 2016

This is fantastic. Thanks for the share :) πŸ’―

Wonderful! Thank you so much.

thanks for the share。Great Job

good job, thanks.

evturn commented Mar 16, 2016

😭 Thank you 😭

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

πŸ‘

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

<lol> Thanks! </lol>

pft!!

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.

Amazing, thanks a lot! :)

It's not expanding className. Using "operand": "source.js.jsx, source.js, text.html", and ES6 class for the component - returns braces.

Thanks Wes!!

AEKurt commented Jun 30, 2016

Thanks a lot πŸ‘

Thanks! very useful!

p2yang commented Aug 23, 2016

Thanks! It's great!

Thanks a lot man!

ridiculously useful as always Wes!

Many Thanks Bro

Hero! Thanks!

joeSaad commented Oct 24, 2016

works great! Thank you πŸ‘

@ghost

ghost commented Oct 26, 2016

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

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

Wes Bos The God! Thank you!

thnks πŸ’―

πŸ‘

dez02 commented Jan 29, 2017

thanks a lot for the share:)

e2goon commented Feb 5, 2017

πŸ‘

sebaslm 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 commented Mar 20, 2017

Great ! thanks a lot for the share

Thanks

uidoyen commented Apr 12, 2017

Thanks!

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?

I love you so much!

dazjavier commented May 31, 2017

Pretty awesome! Works like a charm!

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

@jleee Works for me Thanks :)

AeroKir commented Oct 17, 2017

Hello! It's very helped. Thank!

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

Nice πŸ‘

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

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