JetBrains IDEs - How To Prevent IDE From Changing "Class" Attribute To "ClassName" In React Projects On Copy And Paste?

Question

I work on a React project with my JetBrains IDE and most of the elements in my project are React components. I do however use the Ionic Icons library and when I need to insert an icon into my component, I use something like:

<ion-icon class="icon" name="chevron-forward-outline"/>

Since the Ionic elements are not React components, it uses the class attribute as opposed to the className attribute. Every time I copy and paste an Ionic element like the one above, my JetBrains IDE automatically changes the class attribute to className.

How do I prevent the IDE from doing this?

Exterminatory

Answer 1

please try disabling Convert HTML when pasting into JSX files (convert attributes, close single tags) in Settings | Editor | General | Smart Keys | JavaScript

Calamondin

I'm editing a normal .js file, how do I say to the editor that is not a JSX one? – Meerschaum

If you are using JSX in your code, it's a JSX file regardless of extension – Calamondin

It is now called "Convert HTML when pasting into JSX files (convert attributes, close single tags)" – Wall