VS Code 插件扩展开发指南

东北豆子哥

于 2025-07-11 18:46:31 发布

阅读量497

点赞数 3

CC 4.0 BY-SA版权

分类专栏：工具文章标签： vscode

本文链接：https://blog.csdn.net/weixin_42849849/article/details/149280916

工具专栏收录该内容

14 篇文章

订阅专栏

文章目录

VS Code 插件扩展开发指南

VS Code 插件扩展开发指南

VS Code 插件(也称为扩展)可以增强编辑器的功能，添加新特性或集成外部服务。以下是开发 VS Code 插件的基本流程和关键概念。

开发环境准备

安装必要工具：
- Node.js (建议最新 LTS 版本)
- VS Code
- Yeoman (npm install -g yo generator-code)
创建新项目：
```
yo code
```
然后选择插件类型(TypeScript 或 JavaScript)并填写项目信息。

插件基本结构

一个典型的 VS Code 插件目录结构如下：

.
├── .vscode/                // VS Code 集成配置
├── src/                    // 源代码目录
│   └── extension.ts        // 插件入口文件
├── package.json            // 插件清单文件
├── tsconfig.json           // TypeScript 配置
└── README.md               // 插件文档

核心概念

package.json 配置

package.json 是插件的清单文件，包含以下重要字段：

name: 插件唯一标识
publisher: 发布者名称
version: 版本号
engines.vscode: 兼容的 VS Code 版本
activationEvents: 插件激活事件
contributes: 插件提供的功能点(命令、菜单、语言支持等)

激活事件(Activation Events)

插件在特定事件发生时才会被激活，常见激活事件包括：

onCommand: 执行特定命令时
onLanguage: 打开特定语言文件时
onDebug: 启动调试时
*: VS Code 启动时立即激活(不推荐)

扩展 API

VS Code 提供了丰富的扩展 API，主要命名空间包括：

vscode.commands: 命令相关
vscode.window: 窗口、编辑器相关
vscode.workspace: 工作区相关
vscode.languages: 语言特性相关
vscode.debug: 调试相关

开发示例

1. 创建简单命令

// extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from My Extension!');
    });

    context.subscriptions.push(disposable);
}

对应的 package.json 需要添加：

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

2. 添加编辑器功能

// 显示当前行号
const showLineNumber = vscode.commands.registerCommand('extension.showLineNumber', () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
        const lineNumber = editor.selection.active.line + 1;
        vscode.window.showInformationMessage(`Current line number: ${lineNumber}`);
    }
});
context.subscriptions.push(showLineNumber);

3. 创建状态栏项

// 创建状态栏项
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarItem.text = "$(megaphone) Click Me!";
statusBarItem.command = "extension.showLineNumber";
statusBarItem.show();
context.subscriptions.push(statusBarItem);