How to manually add snippets to VSCode

Question

There are a slew of questions/answers on this, and I went through them without success - here's my setup...

Extensions:

snippets.json file location -- C:\Users\USERNAME.vscode\snippets.json

Suggestion Settings:

Added Emmet Path (redacted):

Snippets.json

{
    "Less": {
        "scope": "php html",
        "prefix": "!less",
        "body": [
            "<script src='https://cdn.jsdelivr.net/npm/less'></script>"
        ],
        "description":"Adds the Less.CSS CDN"
    },
    "MooTools": {
        "prefix": "!cdnmt",
        "body": [
            "<script src='https: //cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js' integrity='sha512-P6QjhxYLbTLOHQpilU3lsmhwLfgVh/zN5rVzcGbmiTWhMcpkHVk8eqWk2vqvM0Z6OhJfrdbYoTzJtGQYUj8ibw==' crossorigin='anonymous' referrerpolicy='no-referrer'></script>"
        ]
    }
}

Right now, neither quicktype works. I've tried !less - there's no conflicting shortcut and hitting tab or enter after it doesn't do anything other than tab or enter.

Same goes for MooTools...

Some reviewed links:

here-are-the-default-emmet-settings-in-visual-studio-code

visual-studio-code-user-snippets-not-working

I've gone through the myriad of answers and tried just about everything. Nothing seems to work. I also am unable to locate/edit the defaultSettings.json (opens as read only in vs).

Additional Information (1)

Tried updating included files:

Still not working (FYI - I did restart VSCode to make sure that wasn't blocking it from taking over).

I presume you mean `C:\Users\USERNAME\.vscode\snippets.json`. Where did you get that path from? When I go to "File/ Preferences/ Configure User Snippets" I get a very different naming schema: `*.code-snippets` for global snippets and `somelanguage.json` (e.g. `php.json`) for somelanguage snippets. (I'm not saying it's wrong, perhaps Microsoft changed the format). — Álvaro González, Dec 14 '22 at 17:32
@ÁlvaroGonzález One of the answers suggested putting my customer snippets.json file there. I also tried it in a different location (listing it instead of the one in the above screenshot). I grabbed the schema off of an extension (a few of them actually). I also tried doing the schema off of vs's website. Just changed it to `*.code-snippets` in the scope (had to assume that's what you meant) and it didn't work. — jpgerb, Dec 14 '22 at 17:41
Have you tried the path provided by the "Configure User Snippets" command? — Álvaro González, Dec 14 '22 at 17:43
Does not show in the Command Pallet as an option. NVM - Just found it - trying now. — jpgerb, Dec 14 '22 at 17:45
What exact option is missing? You don't have a "Configure User Snippets" element inside "File/ Preferences"? You have it, but it doesn't do anything? It opens a prompt but it's empty? — Álvaro González, Dec 14 '22 at 17:48
You should also have a faster access in the gear icon in the side bar, I only mentioned that menu because I thought it'd be easier. — Álvaro González, Dec 14 '22 at 17:49
@ÁlvaroGonzález I was just typing it in command pallet - I did find it under Preferences. It does appear to have worked too -- Can you throw that in an answer for me? Also - thank you for the tip on the gear. — jpgerb, Dec 14 '22 at 17:50
The `snippets.json` file you created is for emmet snippets only. You put the wrong form of snippets in your `snippets.json` if you were trying to create emmet snippets. The form of anippet you created would go into something like `html.json` created as Alvaro suggests. It looks like you want these for html and php files? If yes, I can show an example of how to make these correctly. — Mark, Dec 14 '22 at 19:16

score 2 · Accepted Answer · answered Dec 15 '22 at 07:33

The simplest way to add snippets is to use the interface, either the "File/ Preferences/ Configure User Snippets" menu entry or the similarly named element in the gear icon you can find on the side bar:

You can then choose to add global snippets (to be used in any file type) or per-language snippets:

The program takes care of creating a file with the appropriate name and extension in the correct location. It also adds some boilerplate with documentation. This way you don't need to do prior research about your environment.

{
    // Place your snippets for sql here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

How to manually add snippets to VSCode

Additional Information (1)

1 Answers1