Emmet support in React layer

[favetelinguis]

Is it possible to add emmet support in the React Layer?

When working with JSX files it is very nice to be able to use the HTML parts of Emmet, i know there is support in emmet for making class into className etc.

[regexb]

Was able to do this by setting emmet-expand-jsx-className? t in setq-default in the dotspacemacs/user-config section of my .spacemacs config. Changes globally though so even in html it'll use className instead of class. Can maybe do something with mode hooks to scope this to jsx files? I'm pretty new to spacemacs/emacs though so I wouldn't know where to start to make that work.

[TheBB]

Try this instead:

(add-hook 'react-mode-hook
          (lambda ()
            (setq-local emmet-expand-jsx-className? t)))

If it works you can PR it.

[regexb]

It looks like react-mode doesn't work with emett? I can only get it to work when in web-mode. In react-mode I get the message No matches

[tko]

For me after opening a .jsx file I get emmet-expand-jsx-className? variable has local value t (global value is nil) and emmet-mode is nil -- I've never used emmet-mode before but seems to do the expected thing as long as you enable it. Seems there's explicit (emmet-mode 0) in the layer configuration that disables it for some reason?

[regexb]

@TheBB That hook ended up working, but as @tko pointed out I had to enable emmet-mode in react-mode first by setting (add-hook 'react-mode-hook 'emmet-mode) in my configuration.

[regexb]

Actually. @TheBB It looks like jsx className is enabled in react-mode by default. I just had to add a hook to enable emmet mode and it worked as expected.

spacemacs/layers/+frameworks/react/packages.el

Line 75 in f49792e

(setq-local emmet-expand-jsx-className? t)

[TheBB]

Even better 👍

[regexb]

Any reason why emmet isn't enabled in react-mode by default?

[TheBB]

No.

[favetelinguis]

How does emmet know to use html in. Jsx or. React.js and not css expand?
Den 23 feb 2016 21:35 skrev "Eivind Fonn" notifications@github.com:

No.

—
Reply to this email directly or view it on GitHub
#5130 (comment)
.

[sarith]

Any resolution on this? @begizi I tried everything you've laid out here and only have 'no matches' as you did earlier...

[regexb]

@sarith That issue went away for me after I added (add-hook 'react-mode-hook 'emmet-mode) into my .spacemacs user-init section.

[sarith]

@begizi yup that ended up working for me. earlier I had the add-hook in the user-config section and it didn't work. It is kind of strange though, it should have worked in either section.

[syl20bnr]

Fixed in 0.200.1

[tizoc]

When emmet-mode is enabled, indenting with tab doesn't work. I don't see indent-for-tab-command bound to another key when in this mode.

[tizoc]

Ah btw, this is with emacs-style keys.

[mrmagooey]

Just as another data point, emmet-mode overwrites C-j to be emmet-expand-line and AFAIK this key combination is typically related to adding newlines. Also for emacs-style keys.

[NdYAG]

@tizoc
react-mode deprives from html-mode & js-mode, while tab bind to emmet-expand in html-mode.
try these in your own config

(evil-define-key 'emacs emmet-mode-keymap (kbd "TAB") nil)
(evil-define-key 'emacs emmet-mode-keymap (kbd "<tab>") nil)