Sublime Forum

Is it possible to use Emmet functionality within JSX (React) files?

#1

I’m doing some React tutorials using Sublime and while there are plugins for the JSX syntax and lint I haven’t been able to make Emmet (or something like it) work within these files for the HTML bits of the code. The person I am watching in the tutorial uses WebStorm and in it he can do stuff like “div.class” and hit tab to generate the div but this doesn’t works on Sublime.

Is there a plugin that provides this functionality or some way to configure it?

Thanks in advance!

0 Likes

#2

What exactly can’t you do?
Tag expansion (ul.foo>li.bar*4>span.baz{$$} -> ctrl+e) works out of the box in my jsx files.

As far as I can see Emmet is syntax agnostic, it should work independently from scope, or at least it does for me (I’ve tested all kind of file i usually work on: html/js/css/sass/jsx/plain-text/php/etc).

0 Likes

#3

Thanks for the reply.

It actually works by using ctrl+e (which I didn’t know about, so thanks) but for some reason it doesn’t expands the tag when you hit tab like you can do in html or css files.

I guess ctrl+e it is then :slight_smile:

0 Likes

#4

You can go to Preferences => Key Bindings.

Leave the ‘Default’ keymap alone, and add the following to the ‘User’ keymap (right-side panel that opens up):

{
“keys”: [“tab”],
“command”: “expand_abbreviation_by_tab”,
“context”: [
{
“operand”: “meta.group.braces.round.js, text.html”,
“operator”: “equal”,
“match_all”: true,
“key”: “selector”
},
// run only if there’s no selected text
{
“match_all”: true,
“key”: “selection_empty”
},
// don’t work if there are active tabstops
{
“operator”: “equal”,
“operand”: false,
“match_all”: true,
“key”: “has_next_field”
},
// don’t work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible –
// remove this section
{
“operand”: false,
“operator”: “equal”,
“match_all”: true,
“key”: “auto_complete_visible”
},
{
“match_all”: true,
“key”: “is_abbreviation”
}
]
}

0 Likes

#5

This does not work at all for me. I’ve tried in the default key bindings, emmet user key bindings. Nothing works. It still work in HTML but no where else…

Yes, restarted. Yes reinstall and tried. Nothing is working…

0 Likes