How I Built and Published My Own VS Code Extension (Yes, You Can Too 😌)
Have you ever built a small tool and thought,
“Hmm… this would actually be useful inside VS Code 🤔”
And then immediately followed it up with:
“Nah, publishing a VS Code extension sounds complicated.”
Yeah… same.
But I did it anyway. And surprisingly, it wasn’t that painful (for once).
So in this article, I’ll walk you through how to convert your Python project into a VS Code Extension and publish it to the VS Code Marketplace — step by step, in a casual, no-BS way.
Think of this as a tutorial, not a corporate manual 📘
(We already have enough of those in 2026.)
What You’ll Need (a.k.a. Prerequisites)
Before we summon the VS Code gods, make sure you have these things ready:
✅ A VS Code Marketplace account
👉 Create one here
(Corporate account preferred, unless you enjoy random verification issues)✅ A Python project you actually want to ship
Mine was: pyshrink✅ Visual Studio Code (obviously)
👉 Download VS Code✅ A stable internet connection
Because npm without internet is just… meditation 🧘♂️
Let’s Get Our Hands Dirty 🧑💻
I’m assuming your Python project already exists in a directory called
project1
(Rename it if you like — VS Code doesn’t judge, people do.)
Environment Setup (The “Please Don’t Skip This” Section)
Before creating a VS Code extension, we need Node.js tooling.
Yes, even for a Python project. Welcome to modern development 😬
Step 1: Check Node.js version
node -v
Step 2: Check npm version
npm -v
If these commands fail, pause everything and install Node.js first.
No shortcuts here.
Step 3: Install required global tools
We’ll install:
-
yo→ scaffolding tool -
generator-code→ VS Code extension generator -
vsce→ VS Code Extension CLI
npm install -g yo generator-code vsce
Step 4: Verify npm global path (optional but helpful)
npm config get prefix
This helps when VS Code or your terminal pretends it “can’t find” globally installed packages 🙃
Scaffold Your VS Code Extension
Now comes the magic ✨
Step 1: Generate the extension boilerplate
yo code
You’ll be prompted with a bunch of questions:
- TypeScript or JavaScript?
- Extension name?
- Description?
👉 Choose TypeScript if you’re unsure.
It’s basically JavaScript with better life choices.
Once done, you’ll have a shiny new extension structure ready to customize.
Configure VS Code Commands (Where Your Extension Gets a Brain 🧠)
Your extension doesn’t do anything unless you tell VS Code what commands it supports.
Step 1: Edit package.json
Look for:
contributes.commands
This is where you define commands like:
--help--run- or any custom command your tool needs
Step 2: Add activation events
Inside the same package.json, add your commands under:
activationEvents
Technically, VS Code might infer them automatically…
But let’s not rely on assumptions — that’s how bugs are born 🐛
Compile TypeScript (Yes, This Matters)
Step 1: Compile the extension
npm run compile
This generates the extension.ts output required for VS Code to run your extension.
Common Error (Almost Guaranteed 😅)
❌ Cannot find module
vscode
Quick fix:
npm i --save-dev @types/vscode @types/node
Run compile again and breathe.
Test Your Extension Locally (Before the World Sees It)
This is where we test the extension inside VS Code itself, using something called Extension Dev Host.
Think of it as a sandbox version of VS Code that won’t embarrass you publicly.
Steps to test
- Press F5
- In the new VS Code window:
- Press CTRL + SHIFT + P
- Run your commands (
--help, etc.)
- Run your commands (
Your output should appear under the OUTPUT tab.
If Extension Dev Host Doesn’t Open 😤
This is a known VS Code issue.
Check this GitHub thread:
👉 https://github.com/microsoft/vscode/issues/58470
Fix it before moving on — publishing broken extensions is how legends are not made.
Package Your VS Code Extension 📦
Now for the fun part — turning your project into a .vsix file.
Important Rule
Make sure README.md exists in the root directory
vsce will refuse to cooperate otherwise.
Step 1: Compile again (just to be safe)
npm run compile
Step 2: Package the extension
npx vsce package
🎉 You’ll now see a .vsix file — this is your extension, ready for the marketplace.
Upload to VS Code Marketplace 🚀
Time to go public.
Steps to publish
- Sign in to Visual Studio Marketplace
- Go to Publisher Management
- Select your publisher
- Click New Extension → Visual Studio Code
- Upload your
.vsixfile - Click Continue
- Review auto-filled details (tags matter for SEO 👀)
- Click Save & Upload
- Wait while it shows “verifying”
- Once verified, make it Public
Congrats — you’re officially a VS Code Extension Author 🎩
Editing & Re-uploading Your Extension
Any time you change your code:
Yes, every time.
No, there’s no shortcut (yet).
Example Extension & Final Thoughts
You can check out my sample project here:
👉 GitHub: https://github.com/nitinkumar30/pyshrink-vscode/
Or try my first published extension directly:
👉 VS Code Marketplace: Pyshrink
If you’ve:
- Built your own extension 🚀
- Got stuck somewhere 🧩
- Or have a cool idea brewing ☕
Drop a comment with your extension link or issue — I’ll try to help ASAP. 😄
And if this helped you even a little, feel free to connect with me on
👉 LinkedIn
Happy hacking & may your extensions never crash on activation 😄

Top comments (0)