Creating an Extension#

1
yo code

The generator will ask the following questions:

1
- **Select an extension type**: For example, “New Extension (TypeScript)” or “New Extension (JavaScript)”.
2
- **Extension name and description**: Enter the desired extension name and description as prompted.
3
- **Git initialization**: Whether to initialize a Git repository.
4
- **Package manager**: Choose npm or yarn.

Once generation is complete, you will have an initially scaffolded project structure.

Understanding the Structure#

Open the generated project, and you will see several important files and directories:

• package.json

  This file defines the extension’s basic information, dependencies, VSCode activation events, and command registrations.

  For example:

  1
  {
  2
    "name": "my-sample-extension",
  3
    "displayName": "My Sample Extension",
  4
    "description": "A simple VSCode extension.",
  5
    "version": "0.0.1",
  6
    "engines": {
  7
      "vscode": "^1.60.0"
  8
    },
  9
    "activationEvents": [
  10
      "onCommand:extension.helloWorld"
  11
    ],
  12
    "main": "./out/extension.js",
  13
    "contributes": {
  14
      "commands": [
  15
        {
  16
          "command": "extension.helloWorld",
  17
          "title": "Hello World"
  18
        }
  19
      ]
  20
    },
  21
    "scripts": {
  22
      "vscode:prepublish": "npm run compile",
  23
      "compile": "tsc -p ./"
  24
    },
  25
    "devDependencies": {
  26
      "typescript": "^4.0.0",
  27
      "vscode": "^1.1.37",
  28
      "@types/node": "^12.0.0"
  29
    }
  30
  }

• src/extension.ts** (or extension.js)**

  This is the extension’s entry file. The code here runs when the extension is activated.

  For example, here is a simple example:

  1
  import * as vscode from 'vscode';
  2
  
  3
  export function activate(context: vscode.ExtensionContext) {
  4
      console.log('Congratulations, your extension "my-sample-extension" is now active!');
  5
  
  6
      let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
  7
          vscode.window.showInformationMessage('Hello World from your VSCode extension!');
  8
      });
  9
  
  10
      context.subscriptions.push(disposable);
  11
  }
  12
  
  13
  export function deactivate() {}

Running and Debugging#

• After opening the project, you can find a Launch Extension configuration in VSCode’s Run and Debug panel.
• Press F5, and VSCode will launch a new Extension Development Host.
• In the new window, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and enter the registered command, such as “Hello World”, to test whether the extension works correctly.

Publishing the Extension#

Once development and testing are complete, you can publish the extension to the VSCode Marketplace for others to use:

• Install the vsce tool to help package and publish the extension:

  1
  npm install -g vsce

• Run the packaging command in the project’s root directory:

  1
  vsce package

• Follow the instructions in the official documentation to complete the publishing process.

Extension Activation#

VSCode extensions use the activationEvents array in package.json to define when they should be activated. The following are the main activation event types:

1
- Activates the extension immediately when VSCode starts

1
- Advantage: The extension is always available
2
- Disadvantage: It affects VSCode's startup performance and is not recommended for production environments