如何在VSCode Marketplace中将Snippet Collection创作为多种语言?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (26)

我的目标是创建一个可在VSCode Marketplace中使用的Snippets集合。这些片段将用于3种语言(html,css和JS)。这将对任何从事特定框架工作的人有所帮助,尤其是我的团队。

我知道我可以将片段(我如何在vscode中添加与语言无关的片段?)扩展到多种语言。我也知道根据文档,我应该有一个贡献对象,其中包含一个片段数组。在我package.json的我vsc-extension的默认值如下:

"contributes": {
    "snippets": [
        {
            "language": "markdown",
            "path": "./snippets/markdown.json"
        }
    ]
}

我将package.json更新为以下内容对我来说是否正确:

"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./snippets/snippets.json"
        },
        {
            "language": "javacript",
            "path": "./snippets/snippets.json"
        }
    ]
}

然后让我的片段声明自己的范围("scope": "html")?

提问于
用户回答回答于

我从问题中遗漏的一条信息是我使用Yo生成器来创建我的代码段项目。这是文档中的建议操作。

这很有效。我在片段数组中添加了几种语言,如下所示。

"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./snippets/snippets.json"
        },
        {
            "language": "javacript",
            "path": "./snippets/snippets.json"
        }
        ,
        {
            "language": "scss",
            "path": "./snippets/snippets.json"
        }
    ]
}

然后在里面snippets/snippets.json有一个包含我所有片段的大对象。你可以在下面看到一个例子。每个关键线都是"scope": "html"scope": "scss"

"Each Helper": {
    "scope": "html",
    "prefix": "each",
    "body": [
        "{{#each $1}}",
        "    $2",
        "{{/each}}"
    ],
    "description": "Creates each helper -- handlebars"
},
"Break Point Small": {
    "scope": "scss",
    "prefix": "bps",
    "body": [
        "",
        "@include breakpoint(\"small\") {// 551px and up",
        "    $1",
        "}"
    ],
    "description": "Tablet Break Point --Stencil"
},

我想我应该在没有能够在这里或文档中找到答案后尝试过。

扫码关注云+社区

领取腾讯云代金券