Create VS code custom snippet

Open command pallet using:

Ctrl+Shift+p

on the command pallet, we first search snippet, then select Preference: Configure User snippet. If we want this snippet to work only on a file with an extension of .jsx, then search react and select Javascriptreact.json and paste the code there. If we want that this snippet should work on a file with a .js the extension also then search javascript and select Javascript.json and paste the code there also.

For example, let us we want to generate a react arrow function component using rc. Paste the below code to use the snippet as rc

{
  "React Component": {
    "prefix": "rc",
    "body": [
      "const ${1:ComponentName} = () => {",
      "    return (",
      "        <>",
      "            $2",
      "        </>",
      "    )",
      "}",
      "",
      "export default ${1:ComponentName}",
      ""
    ],
    "description": "React Component"
  }
}

You can use a snippet generator to generate snippet codes

{
    "React Component": {
        "prefix": "rc",
        "body": [
            "import * as React from 'react'",
            "",
            "const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}} = () => {",
            "    return (",
            "        <>",
            "            $2",
            "        </>",
            "    )",
            "}",
            "",
            "export default ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}}",
            ""
        ],
        "description": "React Component"
    }
}