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

Comments

[Andreas Riedmüller]

Hey! I stumble upon your article while searching for how to reuse variables inside snippets.

I did find a solution and just wanted to let you know.

In your case that would be:

        "body": [
            "import './${1:${TM_FILENAME_BASE}}.scss';",
            ...
            "\treturn <div className='$1'>{foo}</div>;",
            "}",
            "",
        ]

Not helping a lot here, but in my example my variable was ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/${1:/pascalcase}/} and I had to use it in many places 😅

Have a great weekend!

[Manuel Artero Anguita 🟨]

thanks @receter :)