Search code examples
javascriptvisual-studio-codevscode-snippets

VSCode multiple versions of custom snippets


I am creating custom javascript snippets in VS Code. I have a snippet that creates a React component class, but using the same prefix, I want to have a slightly different version of the react component class. This is my code:

   "Creates a React component class": {
        "prefix": "rcc",
        "body": [
          "import React from 'react'",
          "",
          "class ${1:className} extends React.Component {",
          "    render() {",
          "        return (",
          "            <div>",
          "",
          "            </div>",
          "        )",
          "    }",
          "}",
          "",
          "export default ${1:className}"
        ],
        "description": "Creates a React component class"
    },

I want to type rcc and have it give me two options, one is default, and the other pastes this code:

   "Creates a React component class": {
        "prefix": "rcc",
        "body": [
          "import React from 'react'",
          "",
          "class ${1:className} extends React.Component {",    
          "    render() {",
          "        const runCallback = (cb) => {",
          "            return cb()",
          "         }",
          "        return (",
          "            <div>",
          "",
          "            </div>",
          "        )",
          "    }",
          "}",
          "",
          "export default ${1:className}"
        ],
        "description": "Creates a React component class"
    },

Solution

  • You can do this without choices:

      "Creates a React component class": {
      "prefix": "rcc",
      "body": [
        "import React from 'react'",
        "",
        "class ${1:className} extends React.Component {",    
        "    render() {",
        "        ${2:const runCallback = (cb) => {\n\t\t\t\t\treturn cb()\n\t\t\t\t\t\\}}",
        
        "        return (",
        "            <div>",
        "",
        "            </div>",
        "        )",
        "    }",
        "}",
        "",
        "export default ${1:className}"
      ],
      "description": "Creates a React component class"
    }
    

    choices do not appear to allow returns in them, but a default option does.

    If you don't want the default option, just Ctr+X twice when it is selected.

    If you want it tab.

    jsx class snippet