Configure Emmet for JSX in VSCode - visual-studio-code

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.

Answer 1

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:

Answer 2

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)

Answer 3

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