How to add custom snippets

Question

I have defined a custom snippet as below into javascriptreact.json

{
    "Console Logging": {
      "prefix": "clg",
      "body": "console.log('DEBUG::${1:key}', ${1:key});",
      "description": "Console Logging with DEBUG key"
    }
}

Now I thought in any files with extension .js, I can simply type clg and the above body will showed up but that's not the case. It seems like I still need to find some way to sort of "activate" the snippet? Unlike atom where it gets activated automatically? What am i missing?

Answer 1

javascriptreact.json is apparently for .jsx files only. So you could make .jsx specific snippets if you wanted to that would not work in .js files. Maybe there are some people who would like that.

It could be solved by putting the snippet into a global snippet file (perhaps with the scope limitations if you find that necessary).

Or you could simply put your snippet into javascript.json snippets file.

Finally if you really want to put your react snippets into javascriptreact.json and have them available in both .js and .jsx files try this setting:

"files.associations": {"*.js": "javascriptreact"},

but then javascript.json snippets won't work in .js files! So you probably don't want that. Just use the javascript.json snippets file.