How to change emmet expanding "className" to "class" in VSCode for JSX/TSX?

Question

In stencil's.js TSX elements attribute for the class selector is the class instead of className (as in React).

Can't find a way in VSCode to change the class attribute's name for emmet's expansion.

Tried preferences for emmet, but it doesn't help.

typescript .st-form__upload

expands to

<div className="st-form__upload"></div>

but I need

<div class="st-form__upload"></div>

Does anybody have the same issue?

Answer 1

From the comment, mapping typescriptreact to html in the Emmet: Include Languages preference solved this for me.

"emmet.includeLanguages": {
    "javascriptreact": "html",
    "typescriptreact": "html",
},

Using this, I have not noticed any issues with incorrect suggestions, but there might be some

To get the identifiers of languages to map to/from, use the Change Language Mode command (⌃⇧P/⌘⇧P → Change Language Mode), which will show both language names and their identifiers in parenthesis.

Answer 2

In case you want more customization, like using single quotes around attribute values in JSX/TSX while still want to keep the existing behavior for .html files, you can use:

{
  "emmet.includeLanguages": {
    "javascriptreact": "xml",
    "typescriptreact": "xml"
  },
  "emmet.syntaxProfiles": {
    "xml": {
      "attr_quotes": "single"
    }
  }
}

References:

• Emmet abbreviations in other file types
• syntaxProfiles.json