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

Every developer has faced this.

You clone a project.

Open it in VS Code.

And then… pause.

“How do I run this?”

You skim the README.

Try one command.

It fails.

Try another.

npm run dev

npm start

flask run

python manage.py runserver

uvicorn main:app --reload

Different projects.

Different frameworks.

Same confusion.

After switching between JavaScript and Python projects for a while, I realized the problem wasn’t skill.

It was friction.

The Hidden Cost of Context Switching

Modern dev work isn’t hard because frameworks are bad.

It’s hard because every framework chooses its own startup ritual.

React (Vite) → npm run dev

Next.js → npm run dev

Angular → npm start

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.

That’s wasted mental energy.

Computers are better at pattern detection than humans —

so why are humans doing this work?

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.

The idea is simple:

Open a project

Click ▶️

The correct dev server starts

No configuration.

No cloud services.

No tracking.

Just automation for something developers repeat every day.

How It Works (No AI, No Magic)

WebRun doesn’t guess.

It looks for signals, the same ones developers rely on subconsciously.

1. package.json

Dependencies and scripts clearly indicate:

Vite

Next.js

CRA

NestJS

Express / Fastify

1. Framework config files

Files like:

vite.config.js

next.config.js

angular.json

Frameworks announce themselves if you listen.

1. Python project clues

manage.py → Django

requirements.txt + app.py → Flask

main.py → FastAPI

1. Folder structure

Common full-stack layouts:

frontend / backend

client / server

web / api

If both are detected, WebRun starts two servers in parallel.

What WebRun Supports

Right now, 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 triggered with one click inside VS Code.

Lessons from Shipping My First Extension

Building was the easy part.

Shipping taught me everything else.

1. Distribution beats perfection

A perfect tool with zero users doesn’t exist.

1. Documentation is the product

If people can’t understand it quickly, they uninstall.

1. Automation > configuration

Every setting you expose is a chance for drop-off.

1. Open source builds trust fast

Clear scope + MIT license = healthy contributions.

1. Small tools actually ship

WebRun does one job:

run the project

That focus made shipping possible.

Open Source & Links

WebRun is completely open source and MIT licensed.

VS Code Marketplace:

Feedback, issues, and contributions are welcome.

Final Thoughts

WebRun isn’t trying to replace the terminal.

It’s trying to remove unnecessary thinking from daily workflows.

If developers repeat something every day,

computers should automate it.

If you’re building developer tools:

Ship early

Learn in public

Iterate based on real usage

That mindset is how WebRun came to life.