Question

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

我知道我可以将代码段（How can I add language-agnostic snippets in vscode?）扩展到多种语言。我也知道according to the docs我应该有一个包含片段数组的贡献对象。在我package.json的{{1}}中，默认设置如下：

vsc-extension

然后我将package.json更新为：

是否正确

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

然后让我的片段声明自己的范围（"contributes": { "snippets": [ { "language": "html", "path": "./snippets/snippets.json" }, { "language": "javacript", "path": "./snippets/snippets.json" } ] }）？

Answer 1

我从问题中遗漏的一条信息是我使用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"
},

我想我应该在无法在此处或文档中找到答案后尝试过。

Answer 2

我要解决的方法是为每种代码段创建文件：php-snippets.json，js-snippets.json等，然后将这些文件添加到代码段数组中。

"contributes": {
    "snippets": [
        {
            "language": "php",
            "path": "./snippets/php-snippets.json"
        },
        {
            "language": "javascript",
            "path": "./snippets/js-snippets.json"
        }
    ]
}

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

2 个答案: