DEV Community

Charan Gutti
Charan Gutti

Posted on

How to Create a VS Code Extension Using `yo code` (Step-by-Step for Beginners)

#beginners #basic #explainlikeimfive #vscode

Visual Studio Code (VS Code) is popular because it’s not just an editor—it’s a platform you can customize with extensions.

Extensions add extra powers:
✨ New themes
✨ Snippets of code
✨ Integrations with tools
✨ Or even brand-new features

But here’s the cool part: you don’t have to just install extensions—you can build your own!

In this guide, we’ll use yo code to create a simple extension. Along the way, I’ll explain why you’re doing each step, so you truly understand it.

🛠️ Step 0: Prerequisites (Why These Matter)

Before we start, we need a few tools installed:

  1. Node.js → This lets us run JavaScript outside the browser. Extensions are powered by JavaScript/TypeScript, so Node is essential. 
   node -v
   npm -v
Enter fullscreen mode Exit fullscreen mode
  1. Yeoman (yo) → Yeoman is a generator tool. Instead of writing boring setup files by hand, Yeoman creates a ready-to-use project for us. 
   npm install -g yo
Enter fullscreen mode Exit fullscreen mode
  1. VS Code Extension Generator (generator-code) → This is a Yeoman plugin specifically for VS Code extensions. It’s what makes yo code work. 
   npm install -g generator-code
Enter fullscreen mode Exit fullscreen mode

✅ With these installed, we don’t need to remember every detail of how extensions are structured—Yeoman handles it.

📦 Step 1: Run yo code

Now, let’s generate our extension:

yo code
Enter fullscreen mode Exit fullscreen mode

Why? Because typing yo code starts an interactive wizard. It asks simple questions like:

  • What type of extension do you want? (JavaScript, TypeScript, Theme, Snippets, etc.)
  • What’s the name of your extension?
  • What should the description be?

👉 For beginners, choose “New Extension (JavaScript)”.

At the end, you’ll have a project folder with everything set up.

📂 Step 2: Explore the Project Structure

Why explore? Because knowing what’s inside helps you understand what does what.

Your generated project will look like this:

hello-world/
├── .vscode/          # Debugging setup
├── package.json      # Extension metadata (name, commands, version)
├── extension.js      # Main logic (this is where your code goes!)
├── README.md         # Documentation for your extension
└── vsc-extension-quickstart.md # Quick tips
Enter fullscreen mode Exit fullscreen mode
  • package.json → Tells VS Code how to load your extension and what commands it provides.
  • extension.js → The brains of your extension. This is where you code.
  • .vscode/launch.json → Lets you debug your extension in a safe test environment.

▶️ Step 3: Run Your Extension in VS Code

Why run now? Because you want to see it in action early—don’t wait until everything’s built.

  1. Open your project in VS Code.
  2. Press F5 (or Run → Start Debugging).
  • This launches a new VS Code window with your extension installed.
    1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
    2. Type your command name (like Hello World).

You should see a notification message appear. 🎉

🛠️ Step 4: Customize Your Extension

Why customize? Because the default code just shows “Hello World.” Let’s make it feel like yours.

Open extension.js. Inside you’ll see something like:

const vscode = require('vscode');

function activate(context) {
    let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
        vscode.window.showInformationMessage('Hello World from my first extension!');
    });

    context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = { activate, deactivate }
Enter fullscreen mode Exit fullscreen mode

Change this line:

vscode.window.showInformationMessage('Hello World from my first extension!');
Enter fullscreen mode Exit fullscreen mode

to:

vscode.window.showInformationMessage('🚀 Hello from my custom VS Code extension!');
Enter fullscreen mode Exit fullscreen mode

Now restart with F5 → run the command again → you’ll see your custom message.

This is where your creativity begins—you can change this logic to do anything you want (open files, show suggestions, even connect to APIs).

📦 Step 5: Package and Share (Optional)

Why package? Because if you want to share your extension with others (or even publish to the VS Code Marketplace), you need a .vsix file.

  1. Install the VS Code Extension Manager: 
   npm install -g vsce
Enter fullscreen mode Exit fullscreen mode
  1. Package your extension: 
   vsce package
Enter fullscreen mode Exit fullscreen mode

This creates something like hello-world-0.0.1.vsix. You can send this file to friends, or upload it to the Marketplace.

🎯 Why We Did All This

Let’s recap the “why” behind each step:

  • Installed tools → because extensions run on Node.js, and we need generators to avoid manual setup.
  • Ran yo code → because it scaffolds everything, so you can start coding immediately.
  • Explored structure → because understanding the files gives you confidence.
  • Ran early → because testing fast helps you learn quicker.
  • Customized code → because that’s where your idea turns into reality.
  • Packaged → because sharing your extension is what makes it powerful.

🚀 Final Thoughts

Creating a VS Code extension isn’t just for advanced developers—it’s for anyone who wants to personalize their coding environment.

With yo code, you don’t have to memorize complicated setups. You just answer a few questions, tweak the code, and you’re already building something useful.

✨ Imagine automating a boring task, creating a shortcut for your workflow, or even building the next popular VS Code extension.

It all starts with yo code.

Top comments (0)