Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 655
btholt Avatar asked Sep 28 '14 21:09

btholt


People also ask

How do I enable emmet in JSX?

Go to settings > extensions > emmet > include languages and add javascript as the item and javascriptreact as the value.

Does emmet work with JSX?

The "typescriptreact" option will help Emmet recognize JSX within your . tsx files if you're using React with TypeScript. Now, I like to go a step further and add another line to our settings.

Does emmet work in .JS files?

Emmets don't work in JS files. However, you can set it so that VS Code thinks that it's a JSX file and it would give React IntelliSense.


2 Answers

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.

like image 51
rafaelbiten Avatar answered Sep 19 '22 05:09

rafaelbiten


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

like image 36
Allan Hortle Avatar answered Sep 18 '22 05:09

Allan Hortle