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 2021 it's not necessary to configure anything as Emmet has support for JSX files by default.

Obviously you need to install the [JSX language definition](https://packagecontrol.io/packages/JSX) from package control after installing Emmet.

Now `TAB` will work but only when the HTML tag is prefixed with a `<`. For example `<div`. To change this behavior open the Emmet settings and change this setting to `false`:

```
"jsx_prefix": false

```

To open the Emmet settings either use the File menu as show in the image below, or open the command palette (CMD+Shift+P on macOS) and write "Emmet settings".

[![enter image description here](https://i.stack.imgur.com/JIjJV.jpg)](https://i.stack.imgur.com/JIjJV.jpg)
Just expanding upon this answer.  

You may not want all letters you write to be expandable into html. You can set another extra object in your context to restrict when the tab completion is applied. This code was found in [this gist](https://gist.github.com/max-mykhailenko/41d0c3991d92f38dcbc6) however I modified the Regex to be a bit better.

```
{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [{
        "operand": "source.js", 
        "operator": "equal", 
        "match_all": true, 
        "key": "selector"
    },{
        "key": "preceding_text", 
        "operator": "regex_contains", 
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
        "match_all": true
    },{
        "key": "selection_empty", 
        "operator": "equal", 
        "operand": true, 
        "match_all": true
    }]
}

```

You'll also need to install the packages RegReplace and Chain of Command as recommended in the gist to even get `span.class` to turn into `<span className="class"></span>`  

If you'd like to add more elements to listen for just add them to the list i.e. `(a\\b|div|span|p\\b|button|strong)`  

The `\\b` refers a word boundary and stops the following from expanding `abc` into `<abc></abc>`