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?

Not familiar with TSX elements, but perhaps you can try mapping that language to `html` with https://code.visualstudio.com/docs/editor/emmet#_emmet-configuration. Like `"emmet.includeLanguages": { "javascript": "html" }` and replace `javascript` with whatever your languageID is. (same as the language mode for those files, I believe - lower right corner). — Mark, Aug 17 '19 at 20:05
Thank you! Added `"emmet.includeLanguages": { "typescriptreact": "html" },` Currenlty works for me — Babchenko Nikolay, Aug 18 '19 at 17:49
@BabchenkoNikolay, this solution is working for the class attribute, but if you are writing TypeScript code inside the .tsx file, the first suggestion from IntelliSense will then be using an emmet abbreviation and not the properties/members/etc. of the component. That's not the case with the default setting. — Philipp Gfeller, Jul 13 '21 at 14:56

score 8 · Answer 1 · answered Aug 27 '21 at 17:05

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.

This worked well for me, but not at first! The trick was to add the new settings to the `emmet.includeLanguages` block that already existed in my case, higher up in the file! — Andrew E, Oct 23 '22 at 08:21

Wenfang Du · Answer 2 · 2021-08-12T02:59:33.627

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:

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

2 Answers2