Is there a JSX emmet for VS Code that surrounds className in { } instead of quotes

Question

Given an emmet abbreviation:

div.layoutStyles.container

Is there a way to produce:

<div className={layoutStyles.container}></div>

instead of <div className="layoutStyles container"></div>

Answer 1

You can make a custom emmet snippet, but the workflow is the same as a regular snippet - although it is good to know this technique as well. In snippets.json:

{
  "html": {
    "snippets": {
      "divx" : "<div className = {$1}>$2</div>"
     }
 }

See Link+tab shortcut Emmet on VSCode - How can I get the "type" to be included in this? for more details on how to create custom emmet snippets - and do reload whenever you make changes to them.

Then, just like a regular snippet, you start with the prefix (here I made it divx) and then type your class info.

---

An alternative method is to use Hyper Snips, another form of snippets.

See VSCode Advanced Custom Snippets for more info on setting up that extension.

Then, in your javascriptreact.hsnips file:

snippet `div\.([^ ]+) ` "expand to jsx className" A
<div className={``rv=m[1]``}>$1</div>
endsnippet

A space actually acts as the trigger and you can have as many items in the className as you want. Demo: