Question: I had been previously using [Allan Hortle's JSX package](https://github.com/allanhortle/JSX) until I ran into an issue with how it handled syntax highlighting. I then noticed that there is an official package, [sublime-react](https://github.com/reactjs/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: 
In April 2015 [Emmet added support for jsx](https://twitter.com/emmetio/status/583398878789132289), 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](https://github.com/sergeche/emmet-sublime/blob/master/README.md#how-to-expand-abbreviations-with-tab-in-other-syntaxes) 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.
From the [JSX-SublimeText Package](https://github.com/allanhortle/JSX) readme:

> 
> Emmet's default is to not support JS files. So you will need to add a keyboard shortcut to tab complete in JSX files.
> 
> 
> open up `Preferences > Key Bindings - user` and add this entry:
> 
> 
> 

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

```