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?

Side note: What was the issue in highlighting? If you make an issue on Github I'd love to try and fix it. — Allan Hortle, Oct 28 '14 at 22:22

score 116 · Answer 1 · answered Aug 02 '15 at 01:49

116

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.

answered Aug 02 '15 at 01:49

rafaelbiten

6,074
2
31
36

6

`^E` now works out of the box, no settings adjustment required. Amazing. – rishat Sep 26 '15 at 20:10
this fixed it for me as well – pbojinov Oct 06 '15 at 19:31
1

Gracias! Works a charm. – rda3000 Nov 28 '15 at 21:18
2

Here's a pretty nice video that shows how to set it up: http://wesbos.com/emmet-react-jsx-sublime/ – k00k Jan 11 '16 at 18:28
I'm using `ctrl+e` but how do you autocomplete self-closing tags? I'd like to type something and then quickly wrap it in a self-closing tag like so `` ? – jmk2142 Feb 03 '16 at 11:03

score 16 · Accepted Answer · answered Oct 28 '14 at 22:21

16

If you type shift+super+p in a file it will let you see the current selection's context in the bottom left.

The first word is always the base file type. (source.js, text.html) In the case of the JSX I chose to change this to source.js.jsx. This is because before it is compiled JSX really isn't javascript, though it does look rather similar. There are plenty of completions and sublime sugar that you'd like to have happen in JSX but not JS. sublime-react on the other hand uses plain old source.js.

So this snippet you have is right you just need to replace source.js.jsx with source.js

answered Oct 28 '14 at 22:21

Allan Hortle

2,435
2
20
22

This works to autocomplete, but seems to break indentation, for me. – konsumer Jan 21 '15 at 12:09
8

Warning: enabling Emmet by rebinding the tab key breaks other autocompletions. For example, `"fu"`+`TAB` will result in ``, not `function function_name () {}` as you would normally be used to. You can alternatively use `Ctrl`+`E` rather than `TAB`. This is the default keybind for Emmet's Expand Abbreviation command and it can be used in any context. – user2943490 Mar 25 '15 at 03:47
You can still use enter though. It's definitely a hacky fix but there is no real solution until emmet fully supports jsx. – Allan Hortle Mar 25 '15 at 07:54

score 16 · Answer 3 · edited Jun 20 '20 at 09:12

From the JSX-SublimeText Package 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:

{
    "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 
        }
    ]
}

score 13 · Answer 4 · answered Feb 08 '21 at 21:18

13

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

answered Feb 08 '21 at 21:18

Pier

10,298
17
67
113

3

jsx_prefix saved my life. – Nithin M D Jul 05 '21 at 18:59
1

Thank you! This really worked for my .tsx files too – narek Jun 18 '22 at 13:24

score 2 · Answer 5 · answered Jun 16 '15 at 15:22

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

score 1 · Answer 6 · answered Jul 17 '17 at 09:06

simply use ctrl+e (cmd+e on mac ) instead of tab to get emmet to work inside your jsx. for example if I expand (using ctrl+e)

render(){
        return(
            .modal>.btn.btn-success{Click Me}   
        )
    }

then I get

render(){
        return(
            <div className="modal">
                    <div className="btn btn-success">Click Me</div>
                </div>  
        )
    }

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

6 Answers6