Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 205
goldylucks Avatar asked May 26 '19 07:05

goldylucks


People also ask

How do I enable Emmet in VS Code JSX?

Go to settings > extensions > emmet > include languages and add javascript as the item and javascriptreact as the value.

Does Emmet work with JSX?

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.

How do you customize Emmet in VS Code?

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”.


2 Answers

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

like image 159
Blessing Avatar answered Oct 19 '22 02:10

Blessing


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.)

  1. Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open 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 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"
            }
         }
    }
    
    • See more about emmet configuration
  3. Save the file Ctrl + S.

  4. 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)

like image 48
TRiNE Avatar answered Oct 19 '22 03:10

TRiNE