50

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.

1
  • For typescript, I needed to change my file extension from .ts to .tsx Commented Apr 18, 2021 at 11:26

3 Answers 3

83

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:

enter image description here

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:

enter image description here

2
  • but It doesn't support multiplications like th*4 is there a way to fix it?
    – Rocky
    Commented Jul 8, 2022 at 0:19
  • @Rocky th*4 works fine for me in React JSX.
    – tony19
    Commented Oct 31, 2022 at 19:42
51
+50

Emmet configuration or enabling is editor specific. In VSCode, You need to enable it for the current workspace. Follow these steps. (If you are busy, follow bold letters.)

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

enter image description here

  1. You'll see the following content by default (my version is 1.35.0) for the new version please see Kevin's comment

    {
        "folders": [],
        "settings": {}
    }
    
  2. Change the content to below

    {
        "folders": [],
        "settings": {
            "emmet.includeLanguages": {
               "javascript": "javascriptreact"
            }
         }
    }
    
  3. Save the file Ctrl + S.

  4. Go to your .jsx file, and type .myClass. Press tab. It should expand to the following.

    <div className="myClass"></div>
    

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

5
  • 1
    I got emmet working for JSX, but I want to output <div className={styles.myClass} /> - thanks for the detailed answer tho :)
    – goldylucks
    Commented Jun 6, 2019 at 9: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 Commented Jun 6, 2019 at 17:23
  • @goldylucks look the EDIT section Commented Jun 6, 2019 at 18:14
  • 6
    with new version of vsc settings.json looks like this { "emmet.preferences": {}, "emmet.includeLanguages": { "javascript": "javascriptreact" } } Commented Jul 8, 2020 at 5:24
  • @KevinBatongbakal thank you. the comment is referred in the answer Commented Jul 8, 2020 at 7:25
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.