How can I make Emmet use className instead of class in .tsx files

Created May 06, 2026 18:21

Hi!

As the title already explains I do have the following scenario when I type something like this in a .tsx file:
div.hello and press tab, it auto completes to <div class="hello"></div>

This however is wrong in React projects and I wonder if there is a setting where I can change that behaviour so the autocomplete uses className instead of class.

Thanks in advance!

5 comments

Elena Pogorelova

Created May 07, 2026 10:01

Unfortunately I failed to reproduce the issue. Do you have a sample project you can share that reproduces it?

Expanding Emmet in JSX context is based on the framework detection. It currently uses the same logic as the tsc compiler. We don't hardcode anything specific to react/preact/solid or other libraries, but instead use the typings and configuration.

There are several major cases:

There is "jsxImportSource" flag in tsconfig/jsconfig or it is a pragma in the file e.g. /** @jsxImportSource solid-js */. In this case IDE builds "virtual" import import("solid-js/jsx-runtime").JSX.IntrinsicElements and we use elements inside of IntrinsicElements type as tags with the corresponding attributes. The part "jsx-runtime" is defined by "jsx" property according to the compiler implementation (see https://www.typescriptlang.org/tsconfig#jsxImportSource).
There is jsxFactory in tsconfig/jsconfig or @jsx pragma e.g. /** @jsx h */. In this case IDE tries to resolve locally the symbol with the name "h" in the scope of the file, and if it exists IDE builds "virtual" import like import("preact").JSX.IntrinsicElements base on the location of the "h" symbol.
If there are no jsxImportSource and jsxFactory IDE tries to resolve global namespace "JSX.IntrinsicElements".
If all the steps above failed, IDE uses build-in react.d.ts typings and the "JSX.IntrinsicElements" namespace from there.

Mpoelzl

Created May 07, 2026 13:55

Hi!

I was not able to resolve this issue unfortunately, I tried enabling the jsxImportSource flag however emmet still autocompletes to class instead of className.

I do have a Vite project with tsx and everything is working correctly otherwise. Is there any info I can provide to identitfy what causes this behaviour?

Elena Pogorelova

Created May 07, 2026 17:01

A sample project that reproduces the issue would be helpful.

Mpoelzl

Created May 09, 2026 14:57

I've create this sample project .

Steps to reproduce the issue:

1. Go to app.tsx
2. Type div.something
3. See it getting autocompleted to <div class="something"></div>

Elena Pogorelova

Created May 09, 2026 19:41

Thank you for sharing the project. Regrettably I didn't manage to reproduce the issue:

What IDE version do you use?

Please sign in to leave a comment.