Creating a Custom VS Code Extension from Scratch

If you find yourself performing the exact same repetitive task in your code editor every single day—whether it's generating boilerplate files, formatting a specific kind of internal data string, or pasting in API keys—it is time to automate it.

Visual Studio Code is brilliant not just because it's fast, but because it is fundamentally web technology. It is built on the Electron framework and powered by Node.js, meaning you can radically extend its functionality using the exact same JavaScript and TypeScript knowledge you use to build websites.

1. Generating the Extension Boilerplate

Microsoft provides a robust Yeoman generator that scaffolds a complete TypeScript project ready for immediate extension development. Make sure you have Node.js installed, and run the following in your terminal:

        npx --package yo --package generator-code -- yo code

# You will be prompted with several configuration questions:
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? FormatJSONMagic
# ? What's the identifier of your extension? format-json-magic
# ? What's the description of your extension? A utility to clean ugly JSON strings.
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm
      

2. The Anatomy of package.json

In a Node app, package.json lists dependencies. In a VS Code extension, it is also your Extension Manifest. It dictates exactly how your extension integrates into the editor's UI without executing any code. This keeps VS Code fast.

Specifically, look at the activationEvents and contributes blocks:

        "activationEvents": [
  "onCommand:format-json-magic.reverseText"
],
"contributes": {
  "commands": [
    {
      "command": "format-json-magic.reverseText",
      "title": "Magic: Reverse Selected Text"
    }
  ]
}
      

The Contract: The contributes section tells VS Code to place "Magic: Reverse Selected Text" in the user's Command Palette (Ctrl+Shift+P). The activationEvents section guarantees that your extension's actual code isn't loaded into RAM until the user explicitly runs that command.

3. Writing the Extension Logic (extension.ts)

Your extension begins executing in the src/extension.ts file. This file must export an activate function. Inside, we will write logic to read the user's highlighted text, modify it, and write it back to the editor.

        import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('FormatJSONMagic is now active!');

    // Register the command ID that matches package.json exactly
    let disposable = vscode.commands.registerCommand('format-json-magic.reverseText', () => {
        
        // 1. Get the active editor window
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            vscode.window.showErrorMessage('No active editor found!');
            return;
        }

        // 2. Extract the highlighted selection
        const selection = editor.selection;
        const text = editor.document.getText(selection);
        
        // 3. Prevent action if nothing is selected
        if (text.length === 0) {
            vscode.window.showInformationMessage('Please highlight some text first.');
            return;
        }

        // 4. Perform our business logic (reverse the string)
        const reversed = text.split('').reverse().join('');
        
        // 5. Replace the text in the editor asynchronously
        editor.edit(editBuilder => {
            editBuilder.replace(selection, reversed);
        }).then(success => {
            if (success) {
                vscode.window.showInformationMessage('Text successfully reversed!');
            }
        });
    });

    // Push to subscriptions to ensure cleanup if deactivated
    context.subscriptions.push(disposable);
}

export function deactivate() {}
      

4. Debugging and Visual Testing

To test this, simply open extension.ts and hit F5 on your keyboard. A brand new VS Code window will pop up. In that new window, open any text file, highlight a word, press Cmd+Shift+P, and search for "Magic: Reverse Selected Text". You will see your code act live on the document!

5. Packaging and Publishing

To share your extension with the world, you must bundle it into a VSIX file. Microsoft provides the vsce (Visual Studio Code Extensions) CLI for this.

        npm install -g @vscode/vsce

# Bundle the extension into a local .vsix package
vsce package

# Or, publish it directly to the Global Microsoft Marketplace 
# (Requires a Personal Access Token from Azure DevOps)
vsce publish
      

Conclusion

Creating a VS Code extension is incredibly rewarding. You are building tools for other builders. Whether you're automating an internal company workflow, establishing standard formatting for your team, or building the next great open-source theme, the API is flexible enough to handle almost anything you can imagine. Before you publish, ensure you've polished your ReadME—it acts as your permanent landing page on the global marketplace!