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

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.
💚

Blog

VSCode snippet: New React component (ts)

Manuel Artero Anguita 🟨

Join Our Newsletter. No Spam, Only the good stuff.

Related