VSCode插件开发：从零构建你的第一个扩展

1. 环境准备

• 安装 Node.js（建议 LTS 版本）
• 安装 VSCode 最新版
• 通过终端安装脚手架工具：

  npm install -g yo generator-code
  

2. 创建项目

运行初始化命令并填写基础信息：

yo code

选择：

• 插件类型：New Extension (TypeScript)
• 输入插件名称（如 hello-world）
• 其他选项按回车使用默认值

3. 项目结构解析

生成的核心文件：

├── src
│   └── extension.ts    # 插件入口文件
├── package.json        # 插件配置清单
└── tsconfig.json       # TypeScript 配置

4. 编写第一个功能

在 src/extension.ts 中添加命令：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册命令：弹出通知
  const disposable = vscode.commands.registerCommand(
    'hello-world.showHello',
    () => {
      vscode.window.showInformationMessage('Hello World!');
    }
  );

  context.subscriptions.push(disposable);
}

5. 配置命令激活

在 package.json 中添加：

{
  "contributes": {
    "commands": [{
      "command": "hello-world.showHello",
      "title": "Show Hello"
    }]
  }
}

6. 运行调试

1. 按 F5 启动调试扩展宿主
2. 在新窗口中按 Ctrl+Shift+P 输入命令：

   > Show Hello
   

3. 观察右上角弹出通知：Hello World!

7. 添加自定义功能

扩展示例：在状态栏显示点击计数

// 在 activate() 函数内添加：
let clickCount = 0;
const statusBarItem = vscode.window.createStatusBarItem(
  vscode.StatusBarAlignment.Right
);

statusBarItem.text = `Clicks: ${clickCount}`;
statusBarItem.show();

context.subscriptions.push(
  vscode.commands.registerCommand('hello-world.increment', () => {
    statusBarItem.text = `Clicks: ${++clickCount}`;
  })
);

8. 打包发布

1. 安装打包工具：

   npm install -g vsce
   

2. 生成 .vsix 安装包：

   vsce package
   

3. 在 VSCode 扩展面板选择 "Install from VSIX" 本地安装测试

9. 进阶学习

• 快捷键绑定：在 package.json 的 keybindings 添加快捷键
• 悬停提示：使用 vscode.languages.registerHoverProvider
• API 参考：VSCode Extension API

提示：调试时可通过 Ctrl+R 快速重启扩展宿主，所有修改后的代码将自动重新加载。

通过这个流程，你已掌握插件开发的核心步骤。接下来可尝试实现文件操作、自定义视图等复杂功能！