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.
Go to settings > extensions > emmet > include languages and add javascript as the item and javascriptreact as the value.
The "typescriptreact" option will help Emmet recognize JSX within your . tsx files if you're using React with TypeScript. Now, I like to go a step further and add another line to our settings.
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”. Click “Add Item”, enter the path to the folder where you've saved the snippets. json file you've created earlier and press “OK”.
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:
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.)
Ctrl + ,
or Cmd + ,
or File > Preferences > Settings. This will open Settings window.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"
}
}
}
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
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With