Create Custom Snippets in Visual Studio Code

Snippets in Visual Studio Code (VSCode) is a powerful tool that can greatly boost productivity. Instead of writing the same boilerplate code, user-created snippets allow you to quickly insert predefined blocks of code by typing a few characters.

In this guide, I’ll walk you through how to create a custom snippet that generates a functional component in for React.

We’ll also make it dynamic by using the filename as the component name, which makes it reusable across different files. So you don’t have to type the file name each time.

Open VSCode and Configure User Snippets

1. Open VSCode.
2. Press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the Command Palette.
3. Type Preferences: Configure User Snippets and select it.
4. Choose the appropriate snippet file for the language you are using (e.g., javascript.json, typescriptreact.json) or create a new global snippet file.

Create a Basic Snippet

Let’s first see how can we create a simple Rect component.

In the snippet file, add the following snippet code:

{
  "React Components": {
    "scope": "javascript,typescriptreact",
    "prefix": "_rfce",
    "body": [
      "const ${1:ComponentName} = () => {",
      "  return <div>${1:ComponentName}</div>;",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Creates a React.js functional component"
  }
}

Breakdown of the Basic Snippet:

• Prefix: The prefix _rfce is what you’ll type to trigger the snippet. it could be anything.
• Body: The body includes a simple functional component with a placeholder ${1:ComponentName} that will prompt you to enter the component name when the snippet is expanded.

Save and Use Your Snippet

After adding the snippet, save the file. Now, in any JavaScript or TypeScript file, you can type _rfce, press Tab, and you’ll see the basic functional component structure.

Let’s make this snippet more dynamic

In the above snippet every time you create a component, you need to type the name of the component let’s make it more dynamic

Replace ${1:ComponentName} with ${TM_FILENAME_BASE}

{
  "React Components": {
    "scope": "javascript,typescriptreact",
    "prefix": "_rfce",
    "body": [
      "const ${TM_FILENAME_BASE} = () => {",
      "  return <div>${TM_FILENAME_BASE}</div>;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "Creates a React.js functional component"
  }
}

Now the snippet automatically takes the name of your file as the component name. I’m more fan of writing the file filename like this sidebar-left.tsx in this case the code will not work as expected let’s make it more dynamic.

Handle Kebab-Case Filenames

If you create a file sidebar-left.tsx, the component name generated will be sidebar-left, which doesn’t follow the PascalCase convention. We want to change it to SidebarLeft.

To achieve this, we will use a transformation to capitalize the first letters and remove the dash.

{
  "React Components Functional Components": {
    "scope": "javascript,typescriptreact",
    "prefix": "_rfce",
    "body": [
      "export const ${TM_FILENAME_BASE/(\\w)(\\w*)|-(\\w)/${1:/capitalize}${2:/downcase}${3:/capitalize}/g} = () => {",
      "  return <div>${TM_FILENAME_BASE/(\\w)(\\w*)|-(\\w)/${1:/capitalize}${2:/downcase}${3:/capitalize}/g}</div>;",
      "};"
    ],
    "description": "React Components Functional Component with filename in PascalCase (handles both single-word and dashed filenames)"
  }
}

It’s Testing time

1. Create a new file named test-comp.js.
2. Type _rfce and hit Tab.

export const TestComp = () => {
  return <div>TestComp</div>;
};

😱 Wow moment right I know.