I Shipped My First VS Code Extension — Here’s What I Learned

Source: Dev.to

The Hidden Cost of Context Switching

Modern dev work isn’t hard because frameworks are bad.
When you switch between stacks you end up memorizing a lot of start‑up commands, which wastes mental energy.

# JavaScript / Node
React (Vite)      → npm run dev
Next.js           → npm run dev
Angular           → npm start

# Python
Flask             → flask run
Django            → python manage.py runserver
FastAPI           → uvicorn main:app --reload

If you work across stacks, your brain becomes a lookup table for commands. Computers are better at pattern detection than humans.

The Idea: Let the Editor Handle It

Instead of memorizing commands, I asked: What if VS Code could detect the project and run it automatically?
That question became my first VS Code extension: WebRun.

How it works for the user

1. Open a project.
2. Click the ▶️ button.
3. The correct dev server starts—no configuration required.

How It Works (No AI, No Magic)

WebRun doesn’t guess. It inspects obvious project clues.

JavaScript / Node clues

• package.json scripts and dependencies indicate frameworks such as Vite, Next.js, CRA, NestJS, Express, Fastify.
• Configuration files like vite.config.js, next.config.js, angular.json further confirm the stack.

Python clues

Folder structure

Common full‑stack layouts (e.g., frontend/ + backend/) are detected, and WebRun can start both servers in parallel.

What WebRun Supports

• Frontend: React, Next.js, Vue, Angular, Svelte, Astro
• Backend (Node): Express, Fastify, NestJS
• Backend (Python): Flask, Django, FastAPI
• Static: HTML/CSS/JS
• Full‑stack projects

All are triggered with a single click inside VS Code.

Lessons from Shipping My First Extension

• Building was the easy part.
• Distribution beats perfection – a perfect tool with zero users isn’t useful.
• Documentation is the product – if people can’t understand it quickly, they uninstall.
• Automation > configuration – every exposed setting is a chance for drop‑off.
• Open source builds trust fast – clear scope + MIT license encourages contributions.
• Small tools actually ship – focusing on one job (“run the project”) made shipping possible.

Open Source & Links

WebRun is completely open source and MIT licensed.

• VS Code Marketplace:
• GitHub Repository:

Feedback, issues, and contributions are welcome.

Final Thoughts

WebRun isn’t trying to replace the terminal; it simply automates a repetitive task. If you’re building developer tools:

• Ship early.
• Learn in public.
• Iterate based on real usage.

That mindset is how WebRun came to life.