In jsx, how do I make Emmet use "class" instead of "className"
We're using Solid.js, which uses JSX, and unlike React, Solid.js uses the regular class attribute for classes, and not classNames.
When I type .bg-white and press Tab, it should complete to <div class="bg-white"></div>
Please sign in to leave a comment.
This should be fixed in 2023.2, please see https://youtrack.jetbrains.com/issue/WEB-28691/Allow-editing-of-Emmet-Zen-shortcuts-for-JSX-to-change-className-to-class.
Hi Elena, I'm on PhpStorm 2024.1 on the Mac.
Do I need to change something in Settings?
Thanks!
I suspect this might be related to the issue I wrote about at: https://intellij-support.jetbrains.com/hc/en-us/community/posts/18293864405778-Class-attributes-not-allowed-in-JSX-code
It looks like the IDE doesn't understand I'm using Solid.js.
This is not controlled by any settings. The framework detection logic is described in https://youtrack.jetbrains.com/issue/WEB-60240/IDE-shouldnt-report-error-for-tags-and-attributes-in-Solid-Preact-react-three-fiber-projects#focus=Comments-27-7435791.0-0.
Do you have
"jsxImportSource"
flag set in tsconfig/jsconfig? Also, what does your package.json look like?Yes, it's the same problem
We do have a
jsxImportSource
, this is what it looks like:And this is what our
package.json
looks like:Note that while I'm on PhpStorm 2024.1 right now, the issue is not specific to 2024.1 – we've had this issue ever since we started using Solid.js which was more than a year ago.
Could you try composing a sample project that reproduces the issue?
I tried creating a base Solid.js project with
npx degit solidjs/templates/ts my-app
to see if I can reproduce the issue there, but I couldn't.Looks like the issue is specific to our repo.
Do you have any ideas on what we can try to isolate it?
Thanks!
problem can be caused by certain dependencies. I've described the framework detection algorithm in my comment above: https://youtrack.jetbrains.com/issue/WEB-60240/IDE-shouldnt-report-error-for-tags-and-attributes-in-Solid-Preact-react-three-fiber-projects#focus=Comments-27-7435791.0-0
Here's a sample project that reproduces the issue:
https://filebin.net/xte1hggezfuph38x
I can't access it unfortunately, the server is down:
Here it is again:
https://filetransfer.io/data-package/RDweXDf4#link
Thank you! The issue goes away on removing
"include": ["packages/ae-typings", "packages-solid"]
from the tsconfig.json. The tsconfig.json is not respected for your.tsx
file because of this line as it's not included in this config.You're right! Getting rid of the line does fix it.
Do you know what the problem with that line is?
include
specifies an allowlist of files to include in the program. By default, allts
files are included. By specifying the explicit patterns, you are excluding other files (those that don't match the pattern) from the project.It looks like the actual problem is that when you add a folder that contains react components, this “breaks” the solid.js jsx files.
The reason we have a folder with react components is because we have a mono repo where one of the projects uses react.
Here's the updated example project:
https://filetransfer.io/manage-package/sEVCBSE6
Do you have any ideas on how we can fix this?
Thanks!
Unfortunately, opening the link results in a 404 error.
Here's another one:
https://transfer.archivete.am/Q0q3i/jetbrains-solid-js-issue.zip
I have replicated the issue and created a new ticket: https://youtrack.jetbrains.com/issue/WEB-67386. Kindly monitor this ticket for any further developments.
Thank you 🙏
Do you have any ideas for a workaround until the issue is fixed?
Ok, thank you!
Any news on this please ? I made comment about my situation on the issue:
https://youtrack.jetbrains.com/issue/WEB-67386
Same thing or worse happening to me on RustRover and it is honestly very annoying.