VS Code自定义侧边栏常驻扩展开发可行性及新扩展创建问询

阿华AIGC实验室

2026-5-25

Hey there! Let's tackle your two VS Code extension development questions step by step:

1. Creating a New VS Code Extension

Getting started with a VS Code extension is straightforward thanks to the official tooling. Here's what you need to do:

First, make sure you have Node.js (LTS version recommended) and Git installed, plus VS Code itself, obviously.
Open your terminal and install the Yeoman scaffolding tool and VS Code extension generator globally:
```
npm install -g yo generator-code
```
Run yo code in the terminal and follow the interactive prompts:
- Pick the extension type you want (TypeScript is preferred for better type safety and tooling support, but JavaScript works too)
- Fill in basic details like extension name, identifier, and description
- Choose whether to initialize a Git repo and install dependencies right away
Once the project is generated, open the folder in VS Code. Hit F5 to launch the Extension Development Host window—this lets you test your extension in a separate, isolated VS Code instance.
From here, you can tweak the package.json (for activation events, contribution points, etc.) and write your core logic in src/extension.ts (or .js if you went with JavaScript).

Absolutely, this is totally doable! You'll use VS Code's View Container and View contribution points to add a persistent sidebar panel. Here's how:

Step 1: Configure the Sidebar Container in `package.json`

Add these entries to the contributes section of your package.json to define your sidebar's presence in the Activity Bar:

"contributes": {
  "viewsContainers": {
    "activitybar": [
      {
        "id": "my-permanent-sidebar",
        "title": "My Sidebar",
        "icon": "media/sidebar-icon.svg" // Replace with your own SVG icon (16x16/24x24, monochrome works best for themes)
      }
    ]
  },
  "views": {
    "my-permanent-sidebar": [
      {
        "id": "custom-sidebar-view",
        "name": "My Custom View"
      }
    ]
  }
}

Step 2: Register the View Content

In your extension's activation logic (usually src/extension.ts), register a webview provider to render your sidebar's content. This is where you can build a custom UI with HTML/CSS/JS:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // Create a webview view provider for your sidebar
  const sidebarProvider: vscode.WebviewViewProvider = {
    resolveWebviewView(webviewView: vscode.WebviewView) {
      // Enable scripts in the webview if you need interactive elements
      webviewView.webview.options = {
        enableScripts: true
      };

      // Set the HTML content for your sidebar
      webviewView.webview.html = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <style>
            body { padding: 16px; font-family: var(--vscode-font-family); }
            h1 { font-size: 1.2em; color: var(--vscode-foreground); }
          </style>
        </head>
        <body>
          <h1>Permanent Sidebar Content</h1>
          <p>This will stay in your sidebar as long as the extension is active!</p>
        </body>
        </html>
      `;
    }
  };

  // Register the provider with VS Code
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider('custom-sidebar-view', sidebarProvider)
  );

  // Optional: Auto-open the sidebar when the extension activates
  vscode.commands.executeCommand('workbench.view.extension.my-permanent-sidebar');
}

Pro Tips

To make the sidebar stay visible even after restarting VS Code, users can right-click the sidebar's icon in the Activity Bar and select Pin.
Use VS Code's theme variables (like var(--vscode-foreground)) in your webview CSS to match the user's active theme.
For interactive features (like sending data between the sidebar and VS Code), use webviewView.webview.postMessage() and webviewView.webview.onDidReceiveMessage().

内容的提问来源于stack exchange，提问作者laki944