VSCode Extensions

Source: Dev.to

Prerequisites

• Node.js and npm (or yarn) installed.
• Yeoman – a scaffolding tool.
• The official VS Code extension generator.

Install Yeoman and the VS Code Extension Generator

npm install -g yo generator-code

Run the Extension Generator

yo code

You’ll be prompted with a few questions. Choose the following options (or adjust to your preferences):

After answering, the generator creates a directory structure for your extension.

Open the Project

cd hello-world-extension
code .

You’ll see a structure similar to this:

hello-world-extension/
├── .vscode/
│   └── launch.json
├── .gitignore
├── .vscodeignore
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   └── extension.ts
└── webpack.config.js

• package.json – contains your extension’s metadata, dependencies, and crucially the activationEvents and contributes sections.
• src/extension.ts – where the main logic of your extension resides.
• .vscode/launch.json – configuration for debugging your extension.

Understanding package.json

Open package.json and locate the following sections:

"activationEvents": [
  "onCommand:hello-world-extension.helloWorld"
],
"contributes": {
  "commands": [
    {
      "command": "hello-world-extension.helloWorld",
      "title": "Hello World"
    }
  ]
}

• activationEvents – defines when your extension will be activated. Here, it activates when the command hello-world-extension.helloWorld is executed.
• contributes.commands – declares the commands your extension offers.

The Core Logic (src/extension.ts)

// Import the VS Code API
import * as vscode from 'vscode';

// Extension activation method. Called when the extension is activated.
export function activate(context: vscode.ExtensionContext) {

    // Register the command defined in package.json
    // The first argument is the command ID, the second is the function to execute.
    const disposable = vscode.commands.registerCommand(
        'hello-world-extension.helloWorld',
        () => {
            // When the command is executed, display an informative message.
            vscode.window.showInformationMessage('Hello World from Hello World Extension!');
        }
    );

    // Add the registered command to the extension's context.
    // This ensures the command is disposed of when the extension is deactivated.
    context.subscriptions.push(disposable);
}

// Extension deactivation method. Called when the extension is deactivated.
export function deactivate() {}

Detailed Explanation

Testing the Extension

1. Press F5. This launches a new VS Code window called the Extension Development Host with your extension loaded.
2. In the new window:
   • Open the command palette (Ctrl+Shift+P or Cmd+Shift+P).
   • Type Hello World and select the command you registered.

You should see the message “Hello World from Hello World Extension!” appear in the top‑right corner.

Packaging & Publishing

To share your extension, you can package it using vsce (Visual Studio Code Extension Manager):

npm install -g vsce
vsce package

The command creates a .vsix file that you can publish to the Visual Studio Marketplace or distribute privately.

What’s Next?

• Add more commands, UI contributions, or language features.
• Explore the VS Code API documentation for advanced capabilities.
• Publish your extension and gather feedback from the community.

Happy coding! 🚀

Building and Packaging Your VS Code Extension

Install the VS Code Extension CLI

npm install -g vsce

Package the Extension

vsce package

Running the command above will generate a .vsix file. This file can be:

• Manually installed in VS Code, or
• Published to the VS Code Marketplace.

Congratulations!

You’ve created and run your first VS Code extension. In this tutorial you’ve seen:

• The basic structure of an extension project.
• The fundamental role of package.json.
• How to use the VS Code API to interact with the editor.

The classic “Hello World” extension is just the beginning. With the VS Code API you can:

• Access the file system.
• Manipulate the editor (e.g., edit documents, add commands).
• Create webviews for rich UI.
• Add snippets, diagnostics, and much more.

Why Build Custom Extensions?

As a Tech Lead, investing time in custom extensions can:

• Boost team productivity.
• Enforce coding standards and best‑practice workflows.
• Provide shared tooling that’s tailored to your codebase.

Next Steps

1. Explore the official VS Code documentation – it’s packed with examples and API references.
2. Experiment – try adding new commands, status‑bar items, or a custom tree view.
3. Publish – when you’re ready, publish your extension to the Marketplace so the whole team can benefit.

The power to shape your development environment is in your hands—keep building!