Use VSCode Snippets in React/Typescript – 3 Examples

If you haven’t taken advantage of VSCode Snippets yet, they’re incredibly useful for saving time typing out repeated boilerplate code. This post is intended as a follow up to my post Save Time with Snippets In VSCode. That post gives a short overview of the benefits of custom snippets and instructions on how to create your own and even how to use them on your team.

I wanted to share some of my favorite snippets to show how these could be used in a common development environment. I hope to spur some ideas on how one could start creating their own. Here are some examples using React/Typescript. However, these patterns exist in other languages/frameworks and can be easily modified and applied to them as well.

Snippet #1: Create a new React component.

If you’re developing with React, the code to create a new component is often the most needed/repeated boilerplate code you type out. Needing to name the component, export it, and define a matching prop type is almost always the same pattern from component to component. In the time it takes to type this out, you may forget why you even needed the component in the first place. A perfect opportunity for an easy snippet to save the day:

"React component template": {
    "prefix": "rfc",
    "body": [
      "export type ${1:$TM_FILENAME_BASE}Props = {};",
      "",
      "export const ${1:$TM_FILENAME_BASE}: React.FC<${1:$TM_FILENAME_BASE}Props> = () => {",
      "return <></>;",
      "};",
    ],
  },

Once you place this snippet in your .code-snippets file, you can type “rfc” in your empty component file, and voila, you get a great component starter. The $TM_FILENAME_BASE variable will take the file name and inject it right into the component and prop type name. And if you’d like it to be different, you can easily rename all three references of the name at the same time.

It’s worth noting that you may prefer a different syntax to creating your React components. Maybe you like to define your components using the `function` keyword instead of an arrow function. Maybe you like default exports. That’s completely fine, and the beauty of custom snippets is that you can change it to use whichever syntax you prefer!

Let’s use this same component idea and take it even a step further.

Snippet #2: Create a new React component in React Native.

If you’re using React Native to build flexible apps for iOS, Android, and web, you know that you have the same problem as above, but with some additional boilerplate overhead. You’ll have to use StyleSheet.create({}) to define your component styles, and you might have an app-wide theme context to utilize as well. Let’s see how this could look as a snippet:

"React Native component template with styles": {
    "prefix": "rfcst",
    "body": [
      "import { StyleSheet } from 'react-native';",
      "import { useTheme } from '@contexts/ThemeContext';",
      "import type { Theme } from '@globals/theme';",
      "",
      "export type ${1:$TM_FILENAME_BASE}Props = {};",
      "",
      "export const ${1:$TM_FILENAME_BASE}: React.FC<${1:$TM_FILENAME_BASE}Props> = () => {",
      "const {theme} = useTheme();",
      "const styles = getStyles(theme);",
      "",
      "return <></>;",
      "};",
      "",
      "const getStyles = (theme: Theme) => StyleSheet.create({});",
    ],
  },

As you can see here, you have all the goods of the previous snippet with some extra helpers. Here we add a stylesheet as a function, make some imports, place our theme context hook + stylesheet into the component, and bam. We’re ready to start building out our new component with the ease of a few keystrokes.

Again, you can take this snippet and customize it to match with your project’s needs. Better yet, check your .code-snippets file into git, so your whole team has access to the snippet, and ensure code style consistency throughout your codebase while saving time on typing out code.

Snippet #3: Use them for Typescript POJO declaration.

Snippets can also be useful for remembering tricky syntax. With typescript, I’m a big fan of using a POJO approach for declaring enum-like constants in my projects. (See this video for why I prefer to use this approach instead of enums). This declaration is pretty syntactically tricky and I found myself forgetting how to type it out, without mistakes, whenever I needed to use it. I created this snippet to help:

"Enum-like Typescript POJO declaration": {
    "prefix": "pojo",
    "body": ["export const ${1} = {} as const;", "", "export type ${1} = (typeof ${1})[keyof typeof ${1}];"],
  },

This snippet allowed me to cut down on the mental overhead of remembering this specific syntax, along with giving me the peace of mind that the declaration is error-free. Two birds with one stone.

VSCode Snippets

Here were a few examples of how you can use VSCode snippets in your own development environment to cut down on the typing and focus on the bigger problem at hand. With this and many other benefits, using snippets seems like a no-brainer. Feel free to get creative with your  snippets. There are so many possibilities out there!