Shoelace: 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

[ibirrer]

Just found this plugin for IntelliJ: https://plugins.jetbrains.com/plugin/15596-stenciljs-web-components. Works like a charm.

[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.

[jcgueriaud1]

Hi,
There is a feature request for Intellij to have a better support for web components: https://youtrack.jetbrains.com/issue/WEB-39620

It's currently planned for 2021.2 release. ( From here: https://github.com/JetBrains/web-types/issues/30#issuecomment-799237646 ).

I will try stencil plugin, thanks for the info.

[Jakemangan]

@ibirrer Hello, what did you do to get the stenciljs plugin working? I've installed it in Webstorm, and then I've restarted but there's still no autocomplete.

[claviska]

It's worth mentioning that, as of beta.28, Shoelace no longer uses Stencil under the hood so this may not apply to the current release. See the changelog and this post for details.

[ibirrer]

@Jakemangan @claviska : Yes, the IntelliJ stencil-plugin doesn't work anymore as of beta.28.

[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.