1

I'm creating a snippet file for my project. However, I only want to defined the scope for some snippets for Vue Files only. Of course I know I can omit the scope property to apply it in all kinds of files, but I don't want that.

I tried different options (vue, html, vuejs) like this:

enter image description here

However this snippet is not being displayed.

enter image description here

If I removed the scope, the snippet is displayed.

enter image description here

enter image description here

enter image description here

But I don't want this, because it shows up in all kinds of files where I don't need it.

I searched in the official documentation in: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-scope but they don't show the list of different possibilities, including of course VueJS.

enter image description here

JotaPardo
  • 817
  • 9
  • 27

2 Answers2

2

I used vue-html scope. Now is working only for Vue files.

"My snippet for vue": {
        "scope": "vue-html",
        "prefix": "hv",
        "body": [
            "Hello vue",
        ],
    },

enter image description here

IMPORTANT: It only shows inside <template> tag.

  • If you need them inside <script> tag, you need to add javascript in the scope. It is going to be displayed in all javascript files.

  • If you need them inside <style> tag, you need to add css in the scope. It is going to be displayed in all css files.

Final code:

"My snippet for vue": {
        "scope": "vue-html,javascript,css",
        "prefix": "hv",
        "body": [
            "Hello vue",
        ],
    },
JotaPardo
  • 817
  • 9
  • 27
1

If you command palette and type Create Snippet, you'll have the choice for all of those regarding Vue.

enter image description here

Like you, I usually take vue-html.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Sorry for my little knowledge, but how do you "command palette"? How can I see that list? – JotaPardo Oct 22 '22 at 22:51
  • 1
    Oh! I saw this. You can invoke the command palette by typing Ctrl + Shift + P. But I typed `Create Snippet` and it shows `No matching commands` – JotaPardo Oct 22 '22 at 22:54
  • You then probably have some error in your VScode config or alike. That one is a default thing as far as I know. Maybe check your settings (`Preferences: Open User Settings (JSON)`) to see if you don't have any kind of warning (bottom left of your VScode interface, with the warning icon). – kissu Oct 22 '22 at 22:56
  • Oh, also launch the snippet command from a Vue file. It may not work if you're already into a config file of some sort. @JotaPardo – kissu Oct 22 '22 at 22:57
  • I tried from different kind of files, config, vue, and others, that command is not being displayed for me. Maybe because I already have a .code-snippets file created – JotaPardo Oct 22 '22 at 23:11
  • 1
    Try it like that: https://share.cleanshot.com/Zdq1c8 Have the same issue? – kissu Oct 22 '22 at 23:13
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/248988/discussion-between-jotapardo-and-kissu). – JotaPardo Oct 23 '22 at 00:08