html - Web 组件的自定义 HTML 代码段

Question

总结

我也在尝试弄清楚如何使用 ATTRIBUTE typeahead (intellisense) 制作 HTML 片段。我们有一个 Web 组件，并且记录了所有标签和与标签关联的属性。实现这一点的最简单方法是什么？

例子

我们有一个顶级zing-grid标签。这个标签有很多属性。对于以下示例，我希望为 caption 提前打字属性。标题属性应该只在我的前缀为 <zing-grid 时出现.

这个问题类似于How to insert html attribute snippet in jsx in vscode .在那个例子中 div有class智能感知。在这种情况下，我希望在我的自定义 Web 组件上为 caption 使用相同的预输入实现。属性。

当前 POC 片段语法

如何确保标题属性仅在 zing-grid 中捕获标签

vue.code-snippets 文件

{
    "zing-grid": {
        "prefix": "<zing-grid",
        "body": [
            "<zing-grid \n\t$0></zing-grid>"
        ],
        "description": "ZingGrid top level tag"
    },

    "zing-grid-caption": {
        "prefix": "<zing-grid ",
        "body": [
            "<zing-grid \n\t caption=\"$1\"></zing-grid>"
        ],
        "description": "Displays a grid with the caption attribute on the grid"
    },  
    "caption": {
        "prefix": "caption",
        "body": [
            "caption=\"Hello World\""
        ],
        "description": "Displays a grid with the caption attribute on the grid"
    }

}

示例输出

以下示例输出来 self 们自己的自定义代码编辑器实现。理想情况下，我们希望这种对 Visual Studio Code 的支持，因为它是一个更强大和更完整的 IDE。

云端应用录屏

1. 另一个链接，因为它让我无法发布链接 https://duaw26jehqd4r.cloudfront.net/items/0E431n0Q1m261T3S1T03/Screen%20Recording%202019-02-07%20at%2003.35%20PM.mov?X-CloudApp-Visitor-Id=2965229

Answer 1

已更新

2019 年 1 月的新功能记录了专门针对 Web 组件的用户的 HTML 扩展。 https://github.com/w3c/webcomponents/issues/776

您应该可以在此处找到他们 2019 年 1 月的最新版本: https://code.visualstudio.com/updates/v1_31#_html-and-css-custom-data-support

---

上一个答案

由@heretic-monkey 回答。我查找了实现 VSCode 扩展而不是代码片段。似乎解决方案就在那里。在有关功能的开头文本中明确定义。感谢您的宝贵时间。