DEV Community

abdvlla
abdvlla

Posted on

I Built a VS Code Extension, I would like your feedback!

Welcome to my first post!

If you write React and TypeScript regularly, you probably already know the feeling: you know how to write a useState + useEffect data fetch, you've done it a hundred times, but that doesn't make typing it out the hundred-and-first time any less annoying. So you either retype the same boilerplate by hand again, or dig through an old project to copy-paste it, or lose a minute to Stack Overflow just to copy paste or check a detail like isLoading vs. isPending. None of that is hard. It's just unnecessary effort that adds up over a day of writing code you already know how to write.

That issue is what led me to build RapidReact, a VS Code extension that turns common React/TypeScript patterns into short, typed snippets.

๐Ÿ”— Install RapidReact ยท View on GitHub

The idea

Instead of hand-writing (or copy-pasting from an old project) the same boilerplate every time, you type a short prefix and get a complete, typed starting point.

For example, typing:

rr.tq.querypage
Enter fullscreen mode Exit fullscreen mode

expands into a full page component wired up with TanStack Query, imports, useQuery, loading/error states, and a return block ready for your JSX.

Preview:

gif of a shortcut 'rr.tq.querypage' being used in a .tsx file

What it covers

RapidReact isn't just generic React snippets, it's built around the stuff that's actually easy to blank on mid-task:

  • Core React patterns, useState, useEffect, typed props, list rendering, forms
  • React Hook Form + Zod, the zodResolver wiring between the two is one of the most-Googled parts of using either library
  • Axios, request helpers, a configured instance, interceptors
  • TanStack Query, useQuery/useMutation with the correct current API (isPending, not the deprecated isLoading)
  • Everyday utilities, debounce, clipboard copy, a typed localStorage wrapper, safe JSON parsing, and more

Every snippet is TypeScript-first, since "correct types" is usually half the reason I'm looking something up in the first place.

Try it

Install RapidReact from the VS Code Marketplace, open a .tsx or .ts file, and start typing any of these:

- rr.state
- rr.formpage
- rr.usefetch
- rr.axios.get
- rr.tq.query
Enter fullscreen mode Exit fullscreen mode

Full snippet list and docs are in the GitHub repo โ€” link in the Marketplace listing.

Why I'm sharing this

I am a developer that is still early in my career, and this is a v0.1 that I built to solve a problem I keep facing with the most common snippets that I would use, and I'm sure there are patterns I haven't covered yet (or details I got wrong). If you try it and hit something missing, broken, or worth adding, please feel free to open an issue on GitHub or drop a comment here. I would love for your feedback on what I should change, add, remove, etc.

Top comments (0)