Skip to main content

​
What are Extensions?

Visual Studio Code extensions allow you to add functionality to the editor, including new languages, debuggers, themes, and tools. VS Code’s extension architecture enables a rich ecosystem while keeping the core editor lightweight and fast. Extensions run in a separate process from the VS Code editor, ensuring that they cannot slow down or crash the main application.

​
Extension Capabilities

Extensions can enhance VS Code in many ways:

Language Support

Add syntax highlighting, IntelliSense, code completion, and language-specific features

Themes

Customize the editor’s appearance with color themes and icon themes

Debuggers

Integrate debugging support for different languages and runtimes

Source Control

Add version control providers and enhance Git workflows

Commands & UI

Register custom commands, menus, keybindings, and UI components

Webviews

Create custom views using HTML, CSS, and JavaScript

​
Built-in Extensions

VS Code ships with over 100 built-in extensions that provide core functionality. These extensions are located in the extensions/ directory of the VS Code source code.

​
Language Extensions

TypeScript/JavaScript

The typescript-language-features extension provides IntelliSense, code navigation, refactoring, and formatting for TypeScript and JavaScript.

Markdown

The markdown-language-features extension offers preview, syntax highlighting, and validation for Markdown files.

JSON

The json-language-features extension provides schema validation, IntelliSense, and formatting for JSON files.

HTML/CSS

The html-language-features and css-language-features extensions support web development with completion and validation.

​
Tool Extensions

Git - The git extension provides comprehensive source control integration:
  • View and stage changes
  • Commit and push/pull
  • Branch management
  • Merge conflict resolution
  • Git history and timeline
Emmet - The emmet extension enables rapid HTML and CSS development:
  • Abbreviation expansion
  • Tag manipulation
  • Math expression evaluation
  • Custom snippets
Extension Editing - The extension-editing extension helps develop VS Code extensions:
  • Package.json schema validation
  • Language configuration schemas
  • Theme schema validation

​
Extension Manifest

Every extension must have a package.json file at its root. This manifest file describes the extension and defines its capabilities. 
{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "A sample extension",
  "version": "1.0.0",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "activationEvents": [
    "onLanguage:typescript"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "myextension.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}

​
Key Manifest Properties

  • name - Unique identifier for the extension (lowercase, no spaces)
  • displayName - Human-readable name shown in the marketplace
  • version - Extension version following semver
  • engines.vscode - Minimum VS Code version required
  • categories - Categories for marketplace classification
  • activationEvents - When the extension should be activated
  • main - Entry point file for the extension
  • contributes - Declarative contributions to VS Code

​
Extension Categories

Extensions are organized into categories in the marketplace:
  • Programming Languages - Language support extensions
  • Snippets - Code snippet collections
  • Linters - Code quality and style checkers
  • Debuggers - Debugging support
  • Formatters - Code formatting tools
  • Themes - Color and icon themes
  • Other - General-purpose extensions

​
Extension Activation

Extensions are lazy-loaded and activate only when needed. Activation events determine when an extension starts: 
{
  "activationEvents": [
    "onLanguage:python",
    "onCommand:myextension.command",
    "onView:myextension.explorer",
    "workspaceContains:**/.eslintrc.json",
    "onFileSystem:sftp",
    "onStartupFinished"
  ]
}
Use specific activation events rather than * to ensure your extension only loads when necessary, improving startup performance.

​
Extension API

Extensions interact with VS Code through the Extension API, defined in vscode.d.ts. This API provides:
  • Commands - Register and execute commands
  • Window - Interact with the editor window
  • Workspace - Access files and folders
  • Languages - Register language providers
  • Debug - Implement debugger support
  • SCM - Integrate source control
  • Tasks - Define and run tasks
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // Register a command
  let disposable = vscode.commands.registerCommand(
    'myextension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello from my extension!');
    }
  );

  context.subscriptions.push(disposable);
}

export function deactivate() {
  // Cleanup when extension is deactivated
}

​
Web Extensions

VS Code supports extensions that run in the browser (vscode.dev, github.dev). Web extensions have some differences:
  • Must use browser-compatible APIs only
  • Cannot use Node.js modules
  • Require a separate browser entrypoint
  • Must declare "browser" field in package.json
{
  "main": "./out/extension.js",
  "browser": "./dist/browser/extension.js",
  "engines": {
    "vscode": "^1.70.0"
  }
}

​
Virtual Workspaces

Extensions can declare support for virtual workspaces (remote or virtual file systems): 
{
  "capabilities": {
    "virtualWorkspaces": {
      "supported": "limited",
      "description": "Some features may be limited in virtual workspaces"
    },
    "untrustedWorkspaces": {
      "supported": false
    }
  }
}

​
Next Steps

Browse Extensions

Learn how to find and install extensions from the marketplace

Create Extensions

Build your first VS Code extension

Publish Extensions

Share your extension with the world

Build docs developers (and LLMs) love

Get started for freeTalk to us