When starting a new React component I use this snippet for the boilerplate.
There are VSCode extensions that do this exact thing. The thing is, I have already installed tons of extensions so, there is a code snippet instead: \new
In the video: I've created a new file named alert.tsx then press \new and get my base React component boilerplate (ts)
import './alert.scss';
interface Props {
foo?: string;
}
export function Alert({ foo }: Props): JSX.Element {
return <div className='alert'>{foo}</div>;
}
Just open Snippets: Configure User Snippets > global.code-snippets and add the following section to the JSON
"ts-component": {
"scope": "typescriptreact",
"prefix": "\\new",
"body": [
"import './${TM_FILENAME_BASE}.scss';",
"",
"interface Props {",
"\tfoo?: string;",
"}",
"",
"export function ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}({ foo }: Props): JSX.Element {",
"\treturn <div className='${TM_FILENAME_BASE}'>{foo}</div>;",
"}",
"",
]
},
Note: I use a custom prefix to name my custom snippets (\\); this way I'm able to locate my snippets quicker in the suggestion box.
--
Cover image from unDraw
Thanks for reading.
💚
Top comments (0)