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

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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