自定义HTML代码段为Web组件

Question

摘要

我试图找出如何使具有属性预输入（智能感知）以及HTML片段。我们有一个Web组件和相关联的标签所有标签和属性都记录在案。什么是实现这个最简单的方法是什么？

例

我们有一个顶层zing-grid标签。这个标记有许多属性。对于下面的例子我想预输入的caption属性。当我有<zing-grid前缀的caption属性应该只出现。

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

Current POC snippet syntax

我如何确保caption属性是zing-grid标签内只捕获

vue.code-片段文件

{
    "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"
    }

}

示例输出

下面的示例输出是从我们自己的自定义代码编辑器实现。我们将理想像Visual Studio代码这种支持，因为它是一个更强大和完整的IDE。

Cloud App Screen Recording

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月文档化扩展HTML扩展专门为Web组件的用户。 https://github.com/w3c/webcomponents/issues/776

这应该引领你到最新的版本在2019年一月在这里：https://code.visualstudio.com/updates/v1_31#_html-and-css-custom-data-support

---

Previous Answer

通过@异端猴回答。我抬起头，实现VSCode扩展，而不是片段。看来，解决方案是存在的。在对他们的能力开始文本明确规定。谢谢你的时间。