Fix FP S6747: Support StencilJS class TSX attribute

[victor-diez-sonarsource]

Seems the StencilJS framework uses class as a valid TSX attribute.

Reported in community.

Probably this should depend on detecting package.json dependencies. But even if React is detected (as it's the user's case), make sure it's actually used in the current analyzed file.

[gabriel-vivas-sonarsource]

Another user in the same thread commented they also saw FP with @react-three/fiber.

[saurabh-sp-tripathi]

We are having the same issue. My error is as following Unknown property 'analyticsvalue' found

<div hidden
                key={purchase?.giftCode}
				analyticsid={`Product_${purchase?.offer?.offerCode}`}
				analyticsvalue="123456789101112"
</div>

[appurist]

I have, what I believe is the same problem, with my web apps that use Solid.js rather than React.
I believe Sonarlint should have a specific rule the S6747 case of class (specifically). I want other unrecognized properties to be reported, but class is part of HTML so creating an error by default is way too intrusive behavior (assumes React).

Can we get the className suggestion added as a separate rule so that we can just turn this specific case off when using additional frameworks and tools?

Edit: Sorry, I thought I matched on a Google search for S6747 sonarlint and thought this was a Sonarlint issue.

[vdiez]

You all can use this workaround in the meantime to whitelist specific attributes: https://community.sonarsource.com/t/unknown-property-jsx-found-with-styled-jsx-ts-s6747/102300/3

[vdiez]

@appurist sonarlint issues for js/ts come from this analyzer, so you you are posting in the right place

[appurist]

I wasn't connected, so I was looking for an update for the VSCode settings.json file. I think I found it. You can whitelist class under the rule? This in my settings.json seems to allow class for both JS and TS:

  "sonarlint.rules": {
    "javascript:S6747": {
      "level": "on",
      "parameters": {
        "whitelist": "class"
      }
    },
    "typescript:S6747": {
      "level": "on",
      "parameters": {
        "whitelist": "class"
      }
    },

Maybe that is the general pattern for disconnected use.
@vdiez Thank you very much, I never would have found that without your link telling me there was a whitelist option.
💯 🙇‍♂️

[Wohops]

Migrated to Jira. New ticket number: JS-74