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

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 (",
        "    ",
        "     $1",
        "    ",
        "  )",
        "}",
        "export default ${TM_FILENAME_BASE}",
    ],
    "description": "Styled Component React Arrow Function With Default Export"
}