Adding user created snippets between template strings in Visual Studio Code

Question

Below I created a snippet that I was going to use in a styled component. The snippet responds to the listed prefix as expected as long as I do not use the snippet inside of a styled component. My question is if there is something that I need to include in the body of my snippet to be able to use the snippet regardless of if it is between template tags or not?

User Created Snippet:

{
    "React Theme": {
        "scope": "javascript,typescript,jsx",
        "prefix": "theme",
        "body": [
            "${props => props.theme.${1:element}}",
        ],
        "description": "React theme"
    }
}

Short Clip of Behavior in editor

Mark · Accepted Answer · 2020-04-23 03:49:58Z

3

It may be because your scope language mode should be javascriptreact instead of jsx:

"scope": "javascript,typescript,javascriptreact",

Click on the file's language in the lower right corner and you will open a panel with all supported language modes with the proper spelling usage in parentheses - like Javascript React (javascriptreact) use that part in parentheses in settings or snippets that require a language mode.

Also put this into your settings:

 "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true         // this is the important one for you!!
  },

so snippets get triggered in a template string.

Try using a different prefix than theme, does that conflict with something in an extension?

Works fine for me:

edited Apr 23, 2020 at 3:49

answered Apr 21, 2020 at 4:18

Mark

191k32 gold badges556 silver badges579 bronze badges

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

7 Comments

Dom Hallan Over a year ago

So that didn't work, but I think I found the actual problem. In a new file I use template string and the snippet works when the template string is on one line. When I split the template string over multiple lines, the snippet is ignored. share.getcloudapp.com/7Ku0yqoL

Dom Hallan Over a year ago

So I am wondering if this a font-related issue because the behavior of auto-completion of 2 template strings is not engaged when I type one that is touching a string.

Dom Hallan Over a year ago

Yeah, because your behavior on having a word next to the template string is the same so that rules that out.

Mark Over a year ago

I see you have two theme snippets - one in the global snippets file and on in users. Shouldn't be a problem but I would try renaming the one you want to use. If you type theme and "Ctrl+Space" does it bring up the snippet suggestion?

Dom Hallan Over a year ago

When I removed the other snippet along with the removal of more plugins than I want to admit to having, it's working. I think that the lesson to be learned here is, you probably don't need 400+ VS Code plugins. Thanks for your help

|

Collectives™ on Stack Overflow

Adding user created snippets between template strings in Visual Studio Code

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related