React Typescript Snippets

If you too are tired of typing the same code when creating a new component in react than VS Code provides a cool solution: Code snippets 🔥.

Here are two snippets for Creating React components with Typescript:

Default Exported React Component

  "Typescript default React component": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
  }

---

Exported React Component

"Typescript React component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }

Flow breakdown

• Type the prefix, in this case, rfc or rfcd. (You can call them whatever you like 🙂).
• Write the interface props.
• Press the tab to jump to the function.
• Add the props you wrote in the interface. (This feels like another step that can be optimized, take the props from the interface but I haven't yet found a solution for that)
• Press tab.
• Start writing the return of the component or just leave it as is with the Component's name.

Vs Code gives us variables we can use in the snippets, here I'm using the TM_FILENAME_BASE variable which gives me the name of the file (without its extension).

The common convention is to make the name of the file the same as the name of the component, but if that's not your case then it's possible to alter that variable, look here for more information.

---

To create your own snippets you'll need to go to Code > Preferences (User Snippets under File > Preferences on Windows), and then select the language for which the snippets should appear, or the New Global Snippets file option.

I've heard of an extension called Folder Template, which creates a folder structure that has a ready-made template inside, I haven't tried it yet but it seems like a good productivity hack, so stay tuned for another post about it in the near future 🙂.