Add support for React className sintaxe and others

[rafaelfndev]

Hi, is possible add support for React sintaxe? When I write $, the quotes are converted to backticks, but I always need to add the curly braces so that the syntax is correct. Is it possible to add support to make this work automatically?

See the video:

backticks.js.mp4

Expected:

<div className={`test ${className}`}></div>

Current:

<div className=`test ${className}`></div>

Thanks.

[chamboug]

Hi @rafaelfndev,

I apologize for the delayed response to your issue. Thank you for bringing this to my attention.

Adding support for JSX is indeed a complex task. The extension currently works by creating an Abstract Syntax Tree (AST) of the line you're typing, which works well for JavaScript and TypeScript but faces challenges with JSX due to its more complex structure.

Implementing this feature would require dedicated development effort and could introduce significant complexity. Unfortunately, I don't have the bandwidth to tackle this right now, but I am open to contributions.

In the meantime, I am considering disabling the extension for JSX and Vue.js tags to prevent unexpected behavior. This should provide a better experience until a more robust solution can be implemented.