VS Code中Web Components（3.0.0-alpha.10）代码补全与错误红线问题求助

手动添加类型定义文件 #

因为你的库不支持npm安装，没法通过官方类型包获取Intellisense支持，手动创建类型声明文件是最直接的办法：

• 在项目根目录新建web-components.d.ts文件
• 写入对应组件的类型声明，比如你用的<my-button>组件可以这么写：

declare namespace JSX {
  interface IntrinsicElements {
    'my-button': {
      disabled?: boolean;
      label?: string;
      // 按需添加组件的其他属性
    };
    // 把所有用到的自定义组件都在这里声明
  }
}

declare global {
  namespace HTMLElementTagNameMap {
    'my-button': HTMLElement; // 如果有自定义元素类，替换成对应的类名
  }
}

保存后，VS Code会自动读取这个文件，提供属性补全并消除未识别标签的红线。

配置VS Code自定义HTML数据 #

修改项目的.vscode/settings.json，添加自定义组件的配置：

{
  "html.customData": ["./web-components-data.json"]
}

然后创建web-components-data.json，按照VS Code的规范编写组件信息：

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-button",
      "description": "自定义按钮组件",
      "attributes": [
        {
          "name": "disabled",
          "description": "禁用按钮",
          "type": "boolean"
        },
        {
          "name": "label",
          "description": "按钮显示文本",
          "type": "string"
        }
      ]
    }
  ]
}

这个配置能让VS Code识别自定义标签和属性，补全功能会立刻生效。

推荐适用的VS Code扩展 #

• HTML CSS Support：强化HTML的属性补全能力，能识别自定义组件的属性，减少红线报错。
• Web Components：专门针对Web Components的扩展，支持自定义元素的语法高亮、标签补全，哪怕是CDN引入的库也能通过简单配置识别。
• Lit Plugin：如果你的Web Components基于Lit开发，这个扩展提供完整的Intellisense，包括模板里的组件和属性补全。

额外小技巧 #

• 检查VS Code的TypeScript服务版本，在设置里确认typescript.tsdk指向的是最新版TypeScript，旧版本可能对自定义元素支持不好。
• 如果组件是用JS定义的，在组件注册代码上方加/** @type {CustomElementConstructor} */注释，帮助VS Code识别组件类型。

内容的提问来源于stack exchange，提问作者Ankur Sharma