VS Code: Generate boilerplate code when creating a new component

February 10, 2022

I am wondering if there is a way to configure VS Code to generate Typescript/ React boilerplate code when creating a new component.
For example when I create a new component named myComponent.tsx I would like the file to be pre-filled with

import * as React from "react";

export interface props {}

export const MyComponent: React.FC<props> = (): JSX.Element => (
  <div>
    {"MyComponent"}
  </div>
);

I found this extension but the generated boilerplate doesn’t match what I want.

Thanks!

>Solution :

The easiest way would be to create a custom snippet:

Press F1
Preferences: Configure User Snippets
typescriptreact.json

{
  "boilerplate": {
    "prefix": "boilerplate",
    "body": [
      "import * as React from \"react\";",
      "",
      "export interface props {}",
      "",
      "export const $TM_FILENAME_BASE: React.FC<props> = (): JSX.Element => (",
      "\t<div>",
      "\t\t{\"$TM_FILENAME_BASE\"}",
      "\t</div>",
      ");"
    ]
  }
}

Then, in a .tsx file, typing boilerplate would suggest the code above which would write exactly the code you want.