My journey

By trace

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

Shreyas Chaliha
Shreyas Chaliha
 ·

2 min read

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.

  1. Open your VS code.

  2. Go to File --> Preferences --> Configure User Snippets

    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684560366545/cd718c3d-c2f5-40b7-b926-fcb612e3e6e1.png align="center")

  3. A drop-down menu will appear, click on "New Global Snippets File". Choosing that option will make the snippet work globally.

    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684562255548/1916dc86-408c-43fe-90c7-2d34381bf8c2.png align="center")

  4. Provide a name and click enter. I am just calling it "Example".

  5. A file will appear, Copy and Paste the following:

  6.   {
  	// 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"
  	  },
  }

  7. Save the file.

  8. Now go to any file and type 'fc'; this should pop up.

    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684561471081/ef596d71-25af-4c9b-a19a-e6cc8268a6f0.png align="center")

  9. Once you click enter, the following snippet will pop up.

    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684562456522/6e348943-7eb3-4824-aa77-59dd452627ab.png align="center")

Congratulations! You are done.

I hope this article helped you.

Happy Hacking!