Visual Studio 用于自定义 Web 组件的 Intellisense

Visual Studio Intellisense for custom web components

我有一些 Web 组件自定义元素,在本例中是使用 StencilJS 构建的。 它们通过 npm 包安装到我的解决方案中,然后通过脚本标记全局包含在布局中。

如何让 Visual Studio 了解这些元素并为自定义元素及其在 .cshtml 视图中的属性提供智能感知?

StencilJS 输出一个 TypeScript *.d.ts 文件,其中包含这些元素的定义,以及描述这些元素的其他 JSON 文件。 Visual Studio 可以使用其中任何一个吗?

似乎可以通过在 html.customData 设置中添加引用来配置 Visual Studio 代码来使用此 JSON,Visual Studio 是否有等效的东西?

有一个名为 docs-vscode 的输出目标尚未记录在官方文档中。您可以在 stencil.config.ts 中使用它,例如

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

然后将 html.customData 设置为 Stencil 将生成的 json 文件的路径(在您再次 运行 构建命令之后)。

我使用 lit-plugin(用于 VS 代码)和 web-component-analyzer(用于分析组件)来为我的基于 LitElement 的自定义元素获得真正漂亮的完整代码和智能感知。我知道 Stencil 优先考虑 JSX 而不是模板文字,所以 lit-plugin 可能对你的情况有帮助,也可能没有帮助。据我了解,Stencil 正在为其元素编写类型以直接利用,但可能是您重要的工具没有适当地制作这些资产 public?

我认为@Thomas 的评论是正确的,目前这是不可能的:

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

我在这里提出了建议:

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

编辑:标记为重复,使用此 link:

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

如果这是您希望在 Visual Studio 中看到的内容,请前往投票并获得一些知名度。