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": "onlySnippets",
  "editor.snippetSuggestions": "top"
}

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

 "scope": "javascript, typescript, typescriptreact"

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 ;-)

If you are trying to insert PHP snippets, its worth noting the you must manually include the

<?php

before the snippets will start to work.

What I actually found is that when you have a php intelliSense and you want a php tab tag to open and close, I added the extension to a html file type as well.

   {
      "Open php tag": {
         "scope": "php, html",
         "prefix": "php",
         "body": [
           "<?php",
             "  $1",
           "?>"
        ],
        "description": "Opens php tags"
      }
   }

This worked for me :)

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.

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

   

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

Simply Restart VScode. That should be fine.

The hint here is you check the full name of the language that your VSCode is automatically recognizing, so after you transform all in lowercase and remove the white spaces and add it in the scope property in the snippet file.

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.

I was experiencing this issue too when I created my first snippet. I added the snippet, and nothing happened.

Restarted VS Code and they started working.

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.

I was trying to setup a snippet to auto add the php open and close tags into my file, as Robert Cooper noted it only worked when I was already writing inside the code specific type block.

So I set !p to load <?php$1?> whenever I use it inside an HTML block. The snippet was set into the html.json file.

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.

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...

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

not sure if anyone made the same "just messing around" mistake that I did, but the profiles(https://code.visualstudio.com/docs/editor/profiles) functionality almost did me in. I had selected a different profile from my default and everything changed. Extensions, snippets, keyboard shortcuts, and probably more I didn't notice. This is just after I was telling everyone how awesome the settings sync is. I had managed to change my profile via the gear in the bottom of the main side bar. The moment I changed back to default everything came back.

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