VS Code: Generate boilerplate code when creating a new component

user_3579415 0
Viewed 597

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!

visual-studio-code typescript reactjs boilerplate
1 Answers

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.

user_26510060
Related