Visual Studio Code user snippets not working

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"
}

Sometimes the obvious that gets overlooked first. Upon starting VSCode and creating a new document (Ctrl + N) it may come as a surprise that the snippets do not work. Check in the bottom right hand corner of the VSCode editor as per default a 'Plain Text' file is presented. Change the file type to your favourite language with snippets.

This may overcome some unnecessary trouble shooting ;-)

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

 "scope": "javascript, typescript, typescriptreact"

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

   

I had to:

1. Go to settings (Windows/Linux: File > Preferences > Settings, macOS: Code > Preferences > Settings) and type in quick in search box and click Edit in settings.json:

2. Add

"editor.quickSuggestions": true

under the section with corresponding file type (markdown in my case):

UPDATE It could be that you need to add this:

"editor.quickSuggestions": {
    "comments": "on",
    "strings": "on",
    "other": "on"
}

instead of just "editor.quickSuggestions": true, because the format might have changed since the time I wrote original answer. Check it for yourself and let me know.

In my case it was not working because I had a space in the name of the snippet

{
  ...,
  "snippet name": { // it should be snippet_name. Notice the _
    ...
  }
}

So make sure that:

1. You have a {name}.code-snippets file under .vscode folder
2. The name of your snippet does not contain spaces
3. You include your language in the scope. I had to add both typescript and typescriptreact.

The extension matters when selecting scope. I had recently switched from react using .js extension to react with typescript using .tsx extension. My snippet said "javascript, typescript" so I thought I was covered, but tsx files are actually considered "typescriptreact". I changed to the following and it started working on my tsx files:

{   
    "Styled Component React Arrow Function With Default Export": {
    "scope": "javascript, javascriptreact, typescript, typescriptreact",
    "prefix": "scraf",
    "body": [
        "import React from 'react'",
        "import styled from 'styled-components/macro'",
        "",
        "const Container = styled.div`",
        "  display: flex;",
        "`",
        "",
        "const ${TM_FILENAME_BASE} = () => {",
        "  return (",
        "    <Container>",
        "     $1",
        "    </Container>",
        "  )",
        "}",
        "export default ${TM_FILENAME_BASE}",
    ],
    "description": "Styled Component React Arrow Function With Default Export"
}

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.

Simply Restart VScode. That should be fine.

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"
    }
}

Changing "editor.tabCompletion": true to "editor.tabCompletion":"on" worked for me.

In case anyone else has this issue, I was working with react native and my JavaScript snippets weren't working. I checked settings.json by going to settings, searched for quick suggestions, and then edit in settings.json.

  "files.associations": {
    "*.js": "javascriptreact" // This needed changed to "javascript".
  }

Otherwise, you can create the snippets for javascriptreact.

Maybe your file is JavaScript, not json. // You should save your snippets in javascript.json instead of json.json.

For anyone else facing this, be sure to also check the scope defined within the snippet. Snippets weren't showing up for me although the file type matches, and removing the languages from the scoped solved the issue for me.

The cause of this issue is that another language is active in VS Code. Check the lower left hand corner of VS Code to change the language to the desired one. Screenshots below. enter image description here

Click on C++ then an input box will appear at the top. Type in the appropriate language, for example HTML and the issue will resolve.

enter image description here

Visual Studio Code How to add the <?php opening tag snippet

Just for the sake of preventing some headache to those who wants to add the handy <?php opening tag snippet

If you follow the instructions on https://code.visualstudio.com/docs/editor/userdefinedsnippets you'll got misled since you are hinted to find the wanted language in File>Preferences>User Snippets

so you type PHP and you'll edit php.json

... but this won't work, because the mechanism works ONLY AFTER the VSCode editor knows this is a PHP file and the filter at bottom right corner looks will not consider itself until you don't add a <?php at the begin of the file

no way

despite filename extension

despite you even manually set the "Select language mode" to PHP (though with PHP extension in the filename, this will be already set to PHP mode)

The unique solution I have found is to add the snippet to a "New global snippet file..."

you will find this option as first as soon you browse to File>Preferences>User Snippets

This solution is obvious ... but only after that you guess it :-) since you add this global,

in fact the snippet in global, as it suggests, will work "globally, in any type of file type

My best strategy is to save my snippets as "Global Snippets" ( .code-snippets" format) whenever I am working on a big project and that way I never have any problem at all.. they always show up.. your global snippets are located on the same file with your ".json" snippets..

I was having this problem with my react project in VSCode then I edited the settings.json. Basically, I added the below lines to the settings.json file.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
} 

In my case, someone had the audacity to commit in the project that I shouldn't use snippets:

// .vscode/settings.json
{
  "[go]": {
    "editor.snippetSuggestions": "none",
  },
}

I removed that line and my user settings kicked in.

For people trying to add snippets to .jsx and .tsx

Go Code/Gear > Preferences > User Snippers

For .tsx type typescriptreact.json For .jsx type javascriptreact.json

Add your snippets there.

  {"Example": {
    "prefix": "$example",
    "body": [
      " {",
      "type: example,",
      "},"
    ],
    "description": "Example"
  }```

"emmet.showSuggestionsAsSnippets": false,

In my case, I had the following configuration value set to false, which effectively disabled all snippet suggestions via IntelliSense. Switch the setting to true to enable them again.

{
  "editor.suggest.showSnippets": true
}

As others have mentioned, you can also configure where snippets should appear in your IntelliSense suggestion list by setting the property "editor.snippetSuggestions" to either top, bottom, inline or none

For any other morons out there like me...

I had a typescript file I was using with react, so you need typescriptreact listed in your snippet.

But I was also naming my file with a .jsx extension instead of a .tsx extension which is why it wasn't showing up...

Install CodeLLDB platform package from vscode extension market. It should be fix your problem