Visual Studio Code user snippets not working

Question

I\'ve enabled the default \"log\" snippet in VS Code. I also added another snippet. Neither show up when I type their prefixes. I have set editor.tabCompletion to t

Answer 1

For those who are looking for overriding default snippet (log)

Overriding the log.json file snippet was not working for me in User Snippets (For Typescript at least).

Solution: I created a new global snippet ( File > Preferences > User Snippets > New Global Snippets file ) with a different name 'clog' (full name: 'clog.code-snippets') and prefix and it worked.

Answer 2

There are a couple of ways you can fix this problem. The problem is Intellisense is getting in the way or default putting your snippets at the bottom of the list.

First I played with the suggestion delay, but then I settled on having Intellisense put my snippets in the top of the list of suggestions with the snippetSuggestions user preference:

{
  "editor.tabCompletion": true,
  "editor.snippetSuggestions": "top"
}

Answer 3

My problem was that some snippets worked, and others dont. (like: JavaScript Snippets worked well)

My issue solved when i installed a plugin that added the respective, specific filetype association (im my case: *.blade.php)

When creating UserSnippets at blade.json it worked fine.

1. Check your file extension and look if there's a plug-in suited for your file type.
2. Install and try adding the snippet again.

Answer 4

1. Open a common html file.
2. look at the bottom right where the plugin is in use (example: Django HTML) and click on it
3. A window will open at the top of vscode
4. Click on "Configure file Association for.'html '..."
5. Search for "HTML" (need this in active caps lock)

6. Select the first option

Answer 5

Don't forget to specify the language in global snippet. In my case it fixed.

{
  "Print to console": {
        "scope": "javascript,vuex,vue",
        "prefix": "debes",
        "body": [
            "// eslint-disable-next-line",
            "debugger;"
        ],
        "description": "Log output to console"
    }
}

Answer 6

For react with typescript, I had to specifically add 'typescriptreact' to the scope.

 "scope": "javascript, typescript, typescriptreact"