如何在.svelte文件中为LitElements启用IntelliSense？

开发者阿泽

2026-7-26

问题

在Svelte中使用Lit Elements（Web Components的扩展）十分便捷：

// MyView.svelte
<script>
  import '@lit-elements-random-lib/my-lit-element'
</script>

<div>
  <my-lit-element>Hello, World !</my-lit-element>
</div>

不过my-lit-element自带自定义属性，我无法在VSCode中启用IntelliSense自动补全功能。我已安装官方Svelte扩展，且尝试过多款VSCode扩展，但都无法为.svelte文件中的Lit Elements属性启用自动补全。请问这是需要开发的功能，还是我遗漏了某些配置？

回答

这并非你遗漏了配置，核心原因是Svelte官方扩展对Web Components的属性自动补全依赖组件的类型定义支持，以下是具体解决思路：

检查组件库的类型定义：多数基于Lit的现代Web Components库会自带.d.ts类型文件，如果你的@lit-elements-random-lib/my-lit-element库没有提供，可查看社区是否有第三方维护的类型包，或者手动生成。
手动生成类型定义：使用web-component-analyzer工具扫描组件生成类型文件。先安装工具：
```
npm install -g web-component-analyzer
```
然后在项目根目录运行：
```
wca analyze node_modules/@lit-elements-random-lib/my-lit-element --outDir types
```
之后在项目的tsconfig.json或jsconfig.json中配置include字段，包含生成的类型文件：
```
{
  "include": ["src/**/*", "types/**/*"],
  "customElements": true
}
```
配置Svelte扩展识别自定义元素：确保项目根目录的jsconfig.json或tsconfig.json中开启customElements选项（如上），同时检查VSCode设置中svelte.plugin.svelte.compilerOptions.customElement是否已启用。