DEV Community

Cover image for VSCode snippet: New React component (ts)

VSCode snippet: New React component (ts)

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>;

Enter fullscreen mode Exit fullscreen mode

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>;",
Enter fullscreen mode Exit fullscreen mode

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)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await