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

【问题标题】：How can I author a Snippet Collection to multiple languages in VSCode Marketplace?如何在 VSCode Marketplace 中将 Snippet Collection 创作为多种语言？
【发布时间】：2019-06-11 05:02:00
【问题描述】：

我的目标是创建一个可在 VSCode 市场中获得的 Snippets 集合。这些 sn-ps 将适用于 3 种语言（html、css 和 JS）。这对从事特定框架工作的任何人都有帮助，尤其是我的团队。

我知道我可以将 sn-ps (How can I add language-agnostic snippets in vscode?) 限定为多种语言。我也知道according to the docs 我应该有一个贡献对象，其中包含一个 sn-ps 数组。在我的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"
        }
    ]
}

然后让我的 sn-ps 声明自己的范围 ("scope": "html")？

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

我这样做的方法是为每种类型的 sn-p 创建一个文件：php-sn-ps.json、js-sn-ps.json 等，然后将这些文件添加到 sn-ps数组。

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

【讨论】：

嘿艾伦。你的答案是正确的。感谢您抽出宝贵的时间。我应该在不久前将其标记为已解决。欢迎来到 SO

【解决方案2】：

我在问题中遗漏的一条信息是我使用 Yo 生成器创建了我的 sn-p 项目。这是文档中推荐的操作。

这行得通。我在贡献的 sn-ps 数组中添加了几种语言，如下所示。

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

然后在snippets/snippets.json 里面有一个包含我所有sn-ps 的大对象。您可以在下面看到一个示例。每个的关键行是"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"
},

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

【讨论】：