In Sublime Text 3, how do you enable Emmet for JSX files?

Question

I had been previously using Allan Hortle's JSX package until I ran into an issue with how it handled syntax highlighting. I then noticed that there is an official package, sublime-react.

With Allan Hortle's package, he included a snippet in the Preferences > Key Bindings – User for enabling Emmet functionality that looks like this:

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }
    ]
}

This snippet doesn't appear to work with the official sublime-react package. It seems to be something to modify with the key bindings but an initial perusal of the Sublime documentation yielded no light on the subject. Help?

Answer 1

In April 2015 Emmet added support for jsx, but it doesn't work by default. Well, for my surprise it was actually working with the control + E shortcut, but I wanted to use the TAB key to expand. Following the official instructions did the trick for me.

Basically, I had to paste the following inside my user key bindings file ( Preferences > Key Bindings — User ):

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}

This is the code without all the comments, and with the right SCOPE_SELECTOR in place.