6

I have some web components custom elements, in this case built with StencilJS. They are installed into my solution via an npm package and then included globally in a layout via a script tag.

How can I get Visual Studio to know about these elements and provide intellisense for custom elements + their attributes in .cshtml views?

StencilJS outputs a TypeScript *.d.ts file containing definitions for these elements, as well as additional JSON files describing the elements. Can Visual Studio use either of these?

It seems as though Visual Studio Code can be configured to consume this JSON by adding a reference in the html.customData setting, does Visual Studio have something equivalent?

elwyn
  • 10,360
  • 11
  • 42
  • 52

3 Answers3

2

I think the comment from @Thomas is correct and this is not currently possible:

Looks like it's not possible: github.com/dotnet/aspnetcore/issues/27054 – Thomas

I have raised a suggestion here:

https://developercommunity.visualstudio.com/idea/1244541/intellisense-for-custom-web-components.html?childToView=1245502

edit: marked as duplicate, use this link:

https://developercommunity2.visualstudio.com/t/Visual-Studio-WebComponents-Intellisense/1227195?preview=true

If this is something you'd like to see in Visual Studio, head over and give it a vote so it gets some visibility.

elwyn
  • 10,360
  • 11
  • 42
  • 52
0

I use lit-plugin (for VS Code) and web-component-analyzer (for analyzing components) to get real nice code complete and intellisense for my LitElement based custom elements. I know Stencil prioritizes JSX over template literals, so lit-plugin may or may not help in your case. It was my understanding the Stencil was writing the types for their elements to leverage directly, but it may be that the tools your important don't make those assets appropriately public?

Westbrook
  • 608
  • 5
  • 9
  • Thanks, however the question is about Visual Studio, not Visual Studio Code. I have the metadata already output from Stencil, I am looking for a way to make Visual Studio use that metadata. – elwyn Nov 05 '20 at 02:30
  • I don't see an extension called web-component-analyzer, is this part of the lit-plugin? Or a separate extension? – David Mays Jul 19 '22 at 14:53
-1

There's an output target called docs-vscode that is not yet documented in the official docs. You can use it in stencil.config.ts like

export const config: Config = {
  outputTargets: [
    {
      type: 'docs-vscode',
      file: 'custom-elements.json',
    },
    // ...
  ],
  // ...
}

And then set html.customData to the path of the json file that Stencil will generate (after you run the build command again).

Simon Hänisch
  • 4,740
  • 2
  • 30
  • 42
  • 1
    Thanks, I'm trying to get it running in Visual Studio however, not Visual Studio Code – elwyn Jun 11 '20 at 00:17
  • 1
    I am also looking for a solution for visual studio 2019, I think there I also need custom-elements.json? but how to tell visual studio? – Michael P Oct 20 '20 at 09:27