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

Question

I previously used the Allan Hortle JSX package until I ran into a syntax processing issue. Then I noticed that there is an official package, sublime-react .

With the Allan Hortle package, he included a snippet in Preferences > Key Bindings – User to enable the Emmet function, which looks like this:

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

This snippet does not work with the official sublime-react package. It seems that something can be changed with the help of key bindings, but the initial reading of the Sublime document did not give light on this topic. Help?

Answer 1

If you enter shift+super+p into the file, you will see the context of the current selection in the lower left corner.

The first word is always the base file type. ( source.js , text.html ). In the case of JSX, I decided to change this to source.js.jsx . This is because, before it is compiled, JSX really is not javascript, although it looks pretty similar. There are many supplements and sublime sugar that you would like to have in JSX, but not JS. sublime-react on the other hand uses plain old source.js .

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

Answer 2

In April 2015, Emmet added jsx support , but by default it does not work. Well, to my surprise, it really worked with the shortcut control + E , but I wanted to use the TAB key to expand. Following the official instructions helped.

Basically, I had to insert the following inside the user keyword binding 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 code is without all comments and with the correct SCOPE_SELECTOR in place.

Answer 3

From the JSX-SublimeText readme package :

By default, Emmet does not support JS files. Thus, you will need to add a key combination so that the tab ends in the JSX files.

go to 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 } ] } 

Answer 4

Just expanding this answer.
You may not need all the letters you write to expand in html. You can set another optional object in your context to limit when tabs are applied. This code was found to make sense , however I modified Regex to be a little 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 will also need to install the RegReplace and Chain of Command packages, as recommended by gist, to even get span.class to go to <span className="class"></span>
If you want to add some more elements to listen to, just add them to the list ie (a\\b|div|span|p\\b|button|strong)
\\b refers to the word boundary and stops the following: from the abc extension to <abc></abc>

Answer 5

just use ctrl+e ( cmd+e on mac) instead of the tab to make emmet 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> ) }