当前位置：首页 > news >正文

VS Code 插件扩展开发指南

news 2025/7/12 9:52:41

文章目录

VS Code 插件扩展开发指南
- 开发环境准备
- 插件基本结构
- 核心概念
- - package.json 配置
  - 激活事件(Activation Events)
  - 扩展 API
- 开发示例
- - 1. 创建简单命令
  - 2. 添加编辑器功能
  - 3. 创建状态栏项
- 调试插件
- 发布插件
- 进阶主题
- 学习资源

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);