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?

Mark · Accepted Answer · 2018-08-11 15:29:36Z

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.

answered Aug 11, 2018 at 15:29

Mark

191k32 gold badges556 silver badges579 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Isaac · Accepted Answer · 2018-08-11 07:35:28Z

0

Turns out the problem is for some reason the snippet can't be recognized if it's inside javascriptreact.json but if I added it into another custom file CustomJavascript.code-snippets, and add a scope property for each of the snippets as below:

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

answered Aug 11, 2018 at 7:35

Isaac

13k18 gold badges66 silver badges135 bronze badges

Collectives™ on Stack Overflow

How to add custom snippets

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related