CODEWITHSUNDEEP
visual-studio-codejsxemmet
goldylucks
goldylucks

Reputation: 6144

Configure Emmet for JSX in VSCode

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.

Upvotes: 50

Views: 40780

Answers (3)

Lahiru Jayakody
Lahiru Jayakody

Reputation: 5410

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)

Upvotes: 52

Dallin Moak
Dallin Moak

Reputation: 1

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

Upvotes: 0

Blessing
Blessing

Reputation: 2720

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

Upvotes: 83

Related Questions