How can I author a Snippet Collection to multiple languages in VSCode Marketplace?

Question

My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.

I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:

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

Is it correct for me to then update my package.json to something like:

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

and then have my snippets declare their own scope ("scope": "html")?

Answer 1

The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.

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

Answer 2

One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.

This worked. I added several languages to the snippets array in contributes as seen below.

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

Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "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"
},

I suppose I should have just tried it after not being able to find the answer here or in documentation.