Custom TypeScript React Snippet: How to Create One in VS Code

A Step-by-Step Guide to Boost Your Productivity and Code Quality by Creating a Custom Typescript React Function Component Snippet in VS Code.

Before I go forward, I would like to thank Josch from Josh Tried Coding for making a great video on how to do it. YouTube link for the tutorial.

Let's get started.

Open your VS code.
Go to File --> Preferences --> Configure User Snippets
A drop-down menu will appear, click on "New Global Snippets File". Choosing that option will make the snippet work globally.
Provide a name and click enter. I am just calling it "Example".
A file will appear, Copy and Paste the following:

  {
      // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
      // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
      // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
      // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
      // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
      // Placeholders with the same ids are connected.
      // Example:
      // "Print to console": {
      //     "scope": "javascript,typescript",
      //     "prefix": "log",
      //     "body": [
      //         "console.log('$1');",
      //         "$2"
      //     ],
      //     "description": "Log output to console"
      // }
      "Typescript React Function Component": {
          "prefix": "fc",
          "body": [
            "import { FC } from 'react'",
            "",
            "interface ${TM_FILENAME_BASE}Props {",
            "  $1",
            "}",
            "",
            "const $TM_FILENAME_BASE: FC<${TM_FILENAME_BASE}Props> = ({$2}) => {",
            "  return (<><div>$TM_FILENAME_BASE</div></>)",
            "}",
            "",
            "export default $TM_FILENAME_BASE"
          ],
          "description": "Typescript React Function Component"
        },
  }

Save the file.
Now go to any file and type 'fc'; this should pop up.
Once you click enter, the following snippet will pop up.

Congratulations! You are done.

I hope this article helped you.

Happy Hacking!

How to Create a TypeScript React Function Component Snippet in VS Code