Code Completion in Jetbrains IntelliJ (WebStorm/PhpStorm)

[Xyz3R]

Is your feature request related to a problem? Please describe.

Unfortunately I cannot get any auto-completion features to work with Jetbrains Intellij (Webstorm). This makes using shoelace components quite the hassle. Has anyone of you experience with setting this up?

Describe the solution you'd like

I am looking for a way to have IntelliJ's autocomplete suggest the Web Components Shoelace offers. I would like it to offer me <sl-button> when entering <sl-b in a HTML file.

Issue created for documentation as suggested by @claviska on Discord 👋

Best regards
Xyz3R

[claviska]

I added a section for IntelliSense in VS Code: https://shoelace.style/getting-started/usage?id=code-completion

I don't use WebStorm but if someone wants to add a similar file to the build for that editor I'd accept a PR.

[claviska]

For anyone looking to implement this, run the build locally and look at dist/metadata.json. This file contains an easy-to-consume list of components you can use to generate the IntelliSense data. This is what I use for the VS Code integration.

[carneloot]

I think this helps the issue. JetBrains launched web types.
Maybe it is possible to generate the web types file using the before mentioned dist/metadata.json.

[claviska]

Some things have changed since my last comment. Shoelace now uses a standardized custom elements manifest called custom-elements.json. This file contains complete API info for all components in the library and is used to power the docs and generate definitions for VS Code and React wrappers.

At a glance, it’s probably not hard to map this to web-types.json.

For anyone interested in tackling this, check out the VS Code script for inspiration: https://github.com/shoelace-style/shoelace/blob/next/scripts/make-vscode-data.js

I would expect it to work in the same manner. To automate generation, see scripts/build.js.

[carneloot]

Just an update. I was tinkering with your recommendation and manage to get a simple code completion working with the test version of the new web-types schema. Since it's a test version, and consequently not prod-ready, I don't think it's safe to add this to the build process.

With that said, there was a Q&A on the JetBrains subreddit where I asked about web-types and their plans for the future. They plan to make web component manifest natively supported on the next WebStorm version.

I guess right now we have to wait and see.

Link to the answer: https://www.reddit.com/r/Jetbrains/comments/p1wd38/the_jetbrains_webstorm_team_is_here_to_answer/h8j2o0a?utm_source=share&utm_medium=web2x&context=3

[claviska]

Awesome. I'm going to close this since they'll be adding it in 2021.3. No need for a separate data file if they support custom-elements.json out of the box!

[ChiSamurai]

I'm digging around that thing for some week now, trying to get IntelliJ to autocomplete the SL component and I had no luck on trying to achive it with the custom-elements.json provided by the SL package. Indeed I have not found any hint about IntelliJ really does support them so I don't really think this issue is fixed/closed :-)

After some research I found [https://github.com/runem/web-component-analyzer/pull/239]( to the https://github.com/runem/web-component-analyzer which generates a web-types.json file working with IntelliJ out of the sources. I had to put the reference to that file in my app's package.json to get that functionality:

{
  "name": "shoelace-test",
  "web-types": [
    "path/to/web-types.json"
  ]
}

You may have a look at the fork/branch I made where I tried to add that into the shoelace's build step:
https://github.com/ChiSamurai/shoelace/tree/webtypes

Just two notes on that:

• I added the npm package web-component-analyzer-webtypes as a dev dependency which is a build of the fork I mentioned above
• I have no idea if the web-types.json generated is correct in the sense of it's definition. At least it produces some references to the source files (i.e. "./../src/components/alert/alert.ts") which surely will not be there in the distributed package.

Cheers,
Matthias

[claviska]

After some research I found [https://github.com/https://github.com/runem/web-component-analyzer/pull/239]( to the https://github.com/runem/web-component-analyzer which generates a web-types.json file working with IntelliJ out of the sources.

I'd rather massage custom-elements.json into something WebStorm understands rather than introduce a second, competing analyzer. Better yet, I was under the impression that they were adding support for this emerging standard. Are they just not there yet?

have no idea if the web-types.json generated is correct in the sense of it's definition.

Same, and I have no idea what web-types.json is supposed to represent, but I'm betting all of the required information is already present in dist/custom-elements.json.

As I'm not a WebStorm user and have shifted focus to 2.0 stable, this feature is going to have to come from a contributor.

[carneloot]

From what I know, web-types.json is a standard the JetBrains team created to add support for web-components. Initially I was trying to generate this file the same way custom-elements.json is generated, but there wasn't enough information on the web web-types.json so that I could complete it (or I'm just dumb, one of the two).

Also, around the time I was doing this, they launched a Q&A where I asked about web-component compatibility, and they said it was coming. So I didn't bother to read any further on the web-types spec.

[ChiSamurai]

Thanks for your replies. I decided to asked the official JetBeans support about the support of custom-elements.json and got an answer:

It's still planned, please follow https://youtrack.jetbrains.com/issue/WEB-49361 and linked tickets for updates

So it's not in there yet and waiting for a year now. So I put some effort in the massage :-) See here:
https://github.com/ChiSamurai/shoelace/tree/customelements-to-webtypes

It converts the custom-element.json into web-types.json by a JSONata expression (which needs jsonata as dev-dependency). Is this ok for you?

[claviska]

That's a clean implementation, and much less expensive than running a second analyzer. I'd accept a PR for it, but I don't have the ability to test it.

Can anyone using WebStorm verify that this is working as intended? Are you seeing all elements and attributes/values that you're expecting to see with it in your IDE now?

[ChiSamurai]

Great :-) So I'll open a PR for that. It at least calmed the linter and offers the values for attributes as well as the event bindings for Angular. But since this is my very first contact as well with shoelace as with web components at all it surely would be helpful if somebody else can verify the functionality.