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.

Thanks in advance for help :)

回答1:

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>
```

EDIT: To obtain {myClass} instead of "myClass"

Currently it's a pending [feature request][3]. But you can go to `VSCodeInstallationDir/resources/app/extensions/emmet` and apply the patch. (using `npm i`)

回答2:

Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window. Go to Workspace tab > Extensions > Emmet.

For new vs code 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:

来源：https://stackoverflow.com/questions/56311467/configure-emmet-for-jsx-in-vscode

标签

visual-studio-code

jsx

emmet