如何让VS Code的Emmett/IntelliSense提示自定义元素/Web组件名称？

要在输入“my-”时触发<my-element>的自动提示并通过Tab快速插入，可按以下步骤配置：

1. 完善自定义HTML数据文件 #

确保你的.html-custom-data.json中明确定义组件标签，指定kind为element，示例如下：

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-element",
      "description": "自定义Web组件",
      "attributes": [
        {
          "name": "custom-prop",
          "description": "组件自定义属性"
        }
      ]
    }
  ]
}

2. 开启HTML标签建议 #

在VS Code的settings.json中确认以下设置已启用：

{
  "html.suggest.html5": true,
  "editor.suggest.showWords": true,
  "editor.suggest.snippetsPreventQuickSuggestions": false
}

3. 配置Emmett识别自定义标签 #

在settings.json中添加Emmett的自定义缩写配置，让它支持你的组件标签：

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.customizations": {
    "html": {
      "abbreviations": {
        "my-element": "<my-element></my-element>"
      }
    }
  }
}

4. 重启VS Code #

修改配置后重启编辑器，输入“my-”即可看到<my-element>的提示选项，选中后按Tab就能快速插入完整的闭合标签。

内容的提问来源于stack exchange，提问作者David Mays