Ignoring class names in JSX

[NoelAbrahams]

Hi

Version: 2021.3.1.0 VS Version: VS Community 2019 (16.11.3)

I have the following JSX in a .tsx code file:

Is there a way to exclude checking of all text that are values of the className attribute?

The same element defined in an HTML file is correctly ignored.

Thanks.

[EWSoftware]

I'm not familiar with that file type. Can you provide a small example project so that I can see how it's being handled?

[NoelAbrahams]

@EWSoftware

I'm attaching an example project, with some comments on expected behaviour. JSX example.zip

The project contains both .tsx and a plain .jsx file. I'm mostly concerned with .tsx but including the latter for completeness.

JXS is a way for embedding HTML in JavaScript files. It's mostly used for React, and you can check out their docs.

We nowadays rarely use JavaScript directly, preferring to use TypeScript instead (which compiles down to JS). So, the .tsx extension is merely the TypeScript equivalent of the JSX file.

Hope that makes sense!

[EWSoftware]

This appears to be a case of working more by accident than by design when the "Apply C# options to all C-style languages" option is enabled. It recognizes .ts and .jsx as C-style language files but currently not .tsx files. I added .tsx as a recognized C-style language file and it then reacts the same way as for .jsx files.

With the option enabled, you can get the same behavior as .jsx files for the time being by adding a Classifications.config file in the %LOCALAPPDATA%\EWSoftware\Visual Studio Spell Checker folder with the following content. You may need to create the folder first but it should exist if you've modified the global configuration.

<Classifications>
  <Extensions>
    <Extension Value="tsx" Classifier="CStyleScript" />
  </Extensions>
</Classifications>

However, it's not working completely as you would expect. If you put literal inner text in the div element, it won't be spell checked since it's treating it like C-style code rather than HTML. It's ignoring the attribute for the same reason. In the editor, it doesn't spell check the inner text if you turn the noted option off either and doesn't recognize the className attribute value as ignored as it's classified as a parameter name and string rather than an attribute name and value.

Perhaps it's not appropriate to treat them a C-style language files to apply those C# related options. If that's the case, I could change it so that it uses the built-in classifier in Visual Studio and make the necessary adjustments to handle the cases noted above so that they are spell checked as expected.

[NoelAbrahams]

@EWSoftware

I may have misled you into thinking that we are only looking for .tsx files to have the same behaviour as .jsx files. The spellchecker is not working correctly on either file type.

How much work are we looking at to identify and check embedded HTML in JavaScript/TypeScript files?

Thanks Noel

[EWSoftware]

I've change .tsx and .jsx files so that they are handled using the general tagger in the editor. With a few minor updates it ignores the unwanted attributes and elements based on the configuration settings. For project/solution spell checking, I added a new classifier that parses the content first as code and then HTML and excludes spans that fall within unwanted HTML attributes and elements and adds any additional HTML spans such as inner text not classified as code elements. It works for the test cases but may not work for all cases. I can address any issues as they occur. A trade-off for both is that it no longer applies the C-style options but that may not be a big deal given the nature of these files. The changes will be in the next release due out soon.

[NoelAbrahams]

Brilliant! Will definitely try it out and provide feedback when it's released.