How to Create Custom React TypeScript (.tsx) Code Snippets in Visual Studio Code

VS Code is a wonderful tool when it comes to code editing you can just make your own custom code snippet and improve development productivity. If you write a lot of React components or anything else that is kind of boilerplate-ish and repetitive it makes sense to create custom snippets as well so your code stays nice, neat, concise i.e. DRY (Don't Repeat Yourself) across all projects. This blog will walk you through setting up a custom React TypeScript. tsx snippet in VS Code.

Step 1 🚀: Find the User Snippet

1. Open Visual Studio Code.

2. To access the user snippet, go to top menu > File> Preferences> User Snippets (or press Ctrl+Shift+P and type Snippets.)

3. Select the Language that you want to create a snippet for. Choose TypeScript React ( for a snippet of react-typescript code. tsx).

Step 2 🚀: Create a New Snippet

Once you click the language for which you want to define your new snippet, VS Code will open a JSON file were you should write down your custom snippets. Template to get you started

Step 3 🚀: Understand the Snippet Structure

prefix: This is the word that triggers your snippet. If you type "rfc" as a code, this is what the snippet shows up in your suggestions.

body - The code that will be embedded in document Using {} in this way you can define placeholders and tab stops where a user input should go.

description – Used to write a brief description of what the snippet does so that it will be easier for one to identify in suggestions.

Step 4 🚀: Store & Resue Your Code Snippet

Save the JSON file after creating this snippet. This way from now on, whenever you create a new. When you are working on a.tsx file in VS Code for example, if you type rfc, the snippet will expand into a complete React functional component skeleton.

Conclusion

Written by Chad, posted on 02-05–2019 Meta: VScode snippets can save you a metric f**k tonne of time when coding so that's an easy start point to look into. With such a guide in hand, you should be able to create React TypeScript snippets of your own that are tailored directly toward the way you work. Get going with writing your own snippets and how they change the way you write code!