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

1. Press F5
   


2. In the new VS Code window:

• Press CTRL + SHIFT + P
  
  
  
  
  1. Run your commands (--help, etc.)
  
  
  
  

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

1. Sign in to Visual Studio Marketplace
   


2. Go to Publisher Management
   


3. Select your publisher


4. Click New Extension → Visual Studio Code
   


5. Upload your .vsix file


6. Click Continue
   


7. Review auto-filled details (tags matter for SEO 👀)


8. Click Save & Upload
   


9. Wait while it shows “verifying”
   


10. 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:

1. Compile TypeScript


2. Package Extension


3. Upload to marketplace

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 😄