The VS Code Snippets I Use to Generate Features in Seconds

Every feature in my project follows the same shape. A page with a breadcrumb and header. A table with columns. A form hook wired up with Zod and React Query. A form UI component.

The structure never really changes — only the entity name does.

For a long time I was writing this boilerplate from scratch every time. Or worse, opening an existing feature, copying files, and doing a find-and-replace. It worked but it was slow and I'd occasionally forget something.

Then I stopped doing that and just wrote VS Code snippets instead.

What the Pattern Looks Like

Before getting into the snippets, here is the shape every feature follows in my project:

features/
└── users/
    ├── components/       # UI components specific to this feature
    ├── constants/        # Lookups, enums, static config
    ├── hooks/
    │   ├── use-users.ts            # data fetching
    │   ├── use-user-form.ts        # form hook (RHF + Zod + mutation)
    ├── pages/            # page components
    ├── types/            # TypeScript types for this feature
    └── validators/       # Zod schemas

Every feature has this same structure. The snippets generate the repetitive parts so I can focus on the actual logic.

The Snippets

Page Layout

Every page in the app is a card with a breadcrumb and a page header. Type pagecard and hit Tab:

"Page Layout with Card and Breadcrumb": {
  "prefix": "pagecard",
  "body": [
    "import React from 'react';",
    "",
    "import { Card, CardContent, CardHeader } from '@ui/card';",
    "",
    "import BreadcrumpSetter from '@/components/shared/breadcrump-setter';",
    "import PageHeader from '@/components/shared/page-header';",
    "",
    "const ${1:Page} = () => {",
    "  return (",
    "    <Card className=\"layout\">",
    "      <BreadcrumpSetter items={[{ title: '${2:Title}', url: '${3:/}' }]} />",
    "      <CardHeader>",
    "        <PageHeader title=\"${2:Title}\" description=\"${4:Description}\" />",
    "      </CardHeader>",
    "      <CardContent>",
    "        $0",
    "      </CardContent>",
    "    </Card>",
    "  );",
    "};",
    "",
    "export default ${1:Page};"
  ]
}

Type the page name once, Tab through the title and description, and you have a complete page shell.

Table Columns Factory

Every table has a getEntityColumns function. Type tblcols:

"Table Columns Factory": {
  "prefix": "tblcols",
  "body": [
    "import { ColumnDef } from \"@tanstack/react-table\";",
    "",
    "export const get${1:Entity}Columns = (): ColumnDef<${1:Entity}>[] => {",
    "  return [",
    "    $0",
    "  ];",
    "};"
  ]
}

DataTable Wrapper

The table component that consumes those columns. Type datatablewrap:

"DataTable Wrapper Component": {
  "prefix": "datatablewrap",
  "body": [
    "import React from 'react';",
    "import { DataTable } from '@/components/table';",
    "import { Pagination } from '@/types';",
    "",
    "interface ${1:Entity}TableProps {",
    "  data: ${1:Entity}[];",
    "  pagination: Pagination | undefined;",
    "  isLoading: boolean;",
    "}",
    "",
    "const ${1:Entity}Table = ({ data, pagination, isLoading }: ${1:Entity}TableProps) => {",
    "  const columns = get${1:Entity}Columns();",
    "  return (",
    "    <DataTable",
    "      data={data}",
    "      columns={columns}",
    "      pagination={pagination}",
    "      isLoading={isLoading}",
    "    />",
    "  );",
    "};",
    "",
    "export default ${1:Entity}Table;"
  ]
}

Type User once and both the props interface and the component are named correctly.

Form Hook

This is the one I use most. It wires up React Hook Form, Zod, a mutation, success toast, error handling, and navigation — all the things every form needs. Type formhook:

"React Hook Form + Zod + Mutation": {
  "prefix": "formhook",
  "body": [
    "import { useRouter } from 'next/navigation';",
    "",
    "import { zodResolver } from '@hookform/resolvers/zod';",
    "import { SubmitHandler, useForm } from 'react-hook-form';",
    "import { toast } from 'sonner';",
    "",
    "import { getErrorMessage } from '@/lib/error';",
    "",
    "const defaultValues: ${1:FormInput} = {",
    "  $0",
    "};",
    "",
    "export const use${2:Something}Form = (${3:params}) => {",
    "  const router = useRouter();",
    "  const mutation = ${4:useCreateSomething}();",
    "",
    "  const form = useForm<${1:FormInput}>({",
    "    defaultValues,",
    "    resolver: zodResolver(${5:formSchema}),",
    "  });",
    "",
    "  const handleSubmit: SubmitHandler<${1:FormInput}> = async data => {",
    "    try {",
    "      await mutation.mutateAsync({ data });",
    "      toast.success('${6:Success message}');",
    "      router.push('${7:/route}');",
    "    } catch (error) {",
    "      toast.error(getErrorMessage(error));",
    "    }",
    "  };",
    "",
    "  return { form, handleSubmit, isSubmitting: mutation.isPending };",
    "};"
  ]
}

Tab through the type name, hook name, mutation, schema, success message, and redirect route. The entire form hook is ready in under 30 seconds.

Form UI Component

The UI side of the form — the FormProvider, the fields, the submit button. Type formui:

"Form UI Wrapper Component": {
  "prefix": "formui",
  "body": [
    "'use client';",
    "",
    "import React from 'react';",
    "import { FormProvider, UseFormReturn } from 'react-hook-form';",
    "",
    "import ActionButtons from '@/components/shared/action-buttons';",
    "import { FormInput } from '@form-input';",
    "",
    "interface ${1:Entity}FormProps {",
    "  form: UseFormReturn<${2:FormInputType}>;",
    "  onSubmit: (data: ${2:FormInputType}) => void;",
    "  isSubmitting: boolean;",
    "}",
    "",
    "const ${1:Entity}Form = ({ form, onSubmit, isSubmitting }: ${1:Entity}FormProps) => {",
    "  return (",
    "    <FormProvider {...form}>",
    "      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">",
    "        <FormInput fieldType=\"input\" name=\"${3:name}\" />",
    "        $0",
    "        <ActionButtons isSubmitting={isSubmitting} onReset={form.reset} />",
    "      </form>",
    "    </FormProvider>",
    "  );",
    "};",
    "",
    "export default ${1:Entity}Form;"
  ]
}

How to Add These to VS Code

Open the command palette (Ctrl+Shift+P on Windows, Cmd+Shift+P on Mac), type "Snippets: Configure User Snippets", and select typescriptreact.json (or typescript.json for non-JSX files). Paste the snippet objects in and save.

They'll be available immediately in any .tsx or .ts file.

Why This Works Better Than Copy-Pasting

The obvious alternative is to open an existing feature and copy the files. The problem is you always bring along things you don't need — old field names, leftover imports, comments that made sense in the original context but not the new one.

Snippets generate only what you need, with placeholders exactly where the decisions are. You fill in the entity name and the logic, nothing else. No cleanup, no accidental leftovers.

It's also faster than any code generator I've tried. No CLI, no config, no dependencies. Just type a prefix and Tab.

The snippets above are specific to my project's imports and conventions so you'll need to adjust the import paths to match yours. But the patterns themselves — a form hook with Zod and mutation, a table wrapper, a page shell — are pretty common in any admin app. Take whatever's useful.

If you have snippets you use every day, I'd love to see them. Find me on LinkedIn.