DEV Community

Cover image for VSCode snippet: New React component (ts)
Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on

VSCode snippet: New React component (ts)

#javascript #react #vscode #webdev

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

Latest comments (2)

Collapse
 
receter profile image
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>;",
            "}",
            "",
        ]
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨 •

thanks @receter :)

Read next

vishnusatheesh profile image

Controlled and Uncontrolled components in react

Vishnu Satheesh -

yogini16 profile image

Kafka vs. RabbitMQ: Which is the Right Messaging Broker for your use case?

yogini16 -

allyn profile image

LeetCode

allyn -

nick_langat profile image

Exploring Python's Map Built in

Nick Langat -