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!
CodePudding user response:
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.