Configure Emmet for JSX in VSCode

Question

I use CSS like this:

const styles = {
  foo: {
    color: 'red'
  }
}

<div className={styles.foo} />

and I want emmet to expand .foo to <div className={styles.foo}></div>

I don't see any reference to class or className in emmet's config file.

Also looked into preferences.json and didn't find a solution.

It seems very simple to do.

What am I missing here?

My code editor is vscode.

For typescript, I needed to change my file extension from `.ts` to `.tsx` — Ben Butterworth, Apr 18 '21 at 11:26

Blessing · Answer 1 · 2021-10-28T16:59:34.603

78

Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window. Go to Workspace tab > Extensions > Emmet.

For the current vs code new version, you'll see a menu called Included Languages. similar to this:

After enter javascript in the item box and after type javascriptreact in the value field and finally press Add item. Your final output must look like the image below:

edited Oct 28 '21 at 16:59

answered Nov 06 '20 at 13:49

Blessing

2,450
15
22

but It doesn't support multiplications like `th*4` is there a way to fix it? – Rocky Jul 08 '22 at 00:19
@Rocky `th*4` works fine for me in React JSX. – tony19 Oct 31 '22 at 19:42

score 49 · Answer 2 · edited Nov 30 '21 at 15:34

49

Emment configuration or enabling is editor specific. In VSCode, You need to enable it for current work space. Follow theses steps. (If you are busy, follow bold letters.)

Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window.
Go to Workspace tab > Extensions > Emmet. You'll see Edit in settings.json under Preferences.

You'll see following content by default (my version is 1.35.0) for the new version please see Kevin's comment
```
{
    "folders": [],
    "settings": {}
}
```

Change the content to below

{
    "folders": [],
    "settings": {
        "emmet.includeLanguages": {
           "javascript": "javascriptreact"
        }
     }
}

See more about emmet configuration

Save the file Ctrl + S.
Go to your .jsx file, type .myClass. Press tab. It should expand to following.
```
<div className="myClass"></div>
```

Currently, obtaining {myClass} instead of "myClass" is a pending feature request. But you can go to to <VSCodeInstallationDir>/resources/app/extensions/emmet and apply the patch. (using npm i)

edited Nov 30 '21 at 15:34

AncientSwordRage

7,086
19
90
173

answered Jun 06 '19 at 07:24

TRiNE

5,020
1
29
42

1

I got emmet working for JSX, but I want to output `
` - thanks for the detailed answer tho :) – Shining Love Star Jun 06 '19 at 09:39
@goldylucks I'm sorry for misunderstanding, I corrected mistake in answer. it expands to **className**. Your need is to use variables for attribute values – TRiNE Jun 06 '19 at 17:23
@goldylucks look the **EDIT** section – TRiNE Jun 06 '19 at 18:14
6

with new version of vsc settings.json looks like this { "emmet.preferences": {}, "emmet.includeLanguages": { "javascript": "javascriptreact" } } – Kevin Batongbakal Jul 08 '20 at 05:24
@KevinBatongbakal thank you. the comment is referred in the answer – TRiNE Jul 08 '20 at 07:25

score 0 · Answer 3 · answered Jan 11 '23 at 18:39

I had this same question. I found this post, and I've concluded emmet doesn't support setting class as anything other than a string. User Freestyle09 suggested user snippets, I've gone ahead and made one for myself, it's not a full solution, but it's the workaround I've settled with.

I'm just using emmet to create the html, and then putting my cursor in to the element, and typing " cn", and I have a user snippet defined for javascript and jsx as follows:

    "jsx class name": {
        "prefix": ["cn", "className", "classname"],
        "body": ["className={${1:styles}.${2:class}}"]
    }

there's probably a more elegant way to do it, feel free to build from there. I started with the user snippets page

Configure Emmet for JSX in VSCode

3 Answers3

Linked