reactjstypescriptvisual-studio-codeboilerplate

VS Code: Generate boilerplate code when creating a new component


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:

    {
      "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.