乐闻世界logo
6月2日 01:16

VSCode 扩展怎么开发？从脚手架到发布完整流程

开发 VSCode 扩展就是写一个 Node.js 程序，通过 VSCode 提供的 API 注册命令、视图、语言服务等功能。从零到发布，核心步骤：脚手架生成 → 实现功能 → 调试 → 打包发布。

环境准备

bash
npm install -g yo generator-code vsce
  • yo + generator-code：官方脚手架，生成扩展项目模板
  • vsce：打包和发布工具

创建扩展

bash
yo code

按提示选择：

  • 扩展类型：New Extension (TypeScript) 推荐
  • 扩展名、显示名、描述
  • 是否初始化 Git 仓库
  • 是否用 webpack 打包（推荐选 Yes，打包后体积小很多）

生成的项目结构：

shell
my-extension/
├── src/
│   └── extension.ts    # 扩展入口
├── package.json         # 扩展配置（命令、菜单、激活事件）
├── tsconfig.json
└── .vscode/
    ├── launch.json      # 调试配置（自动生成）
    └── tasks.json       # 编译任务

核心概念

激活事件：扩展不是启动时就加载，而是按需激活。在 package.json 的 activationEvents 里声明何时激活：

json
"activationEvents": [
    "onCommand:myExtension.hello",
    "onLanguage:python"
]

onCommand 在用户执行指定命令时激活，onLanguage 在打开特定语言文件时激活。

入口函数：extension.ts 导出 activate 和 deactivate 两个函数：

typescript
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand(
        'myExtension.hello', () => {
            vscode.window.showInformationMessage('Hello World!');
        }
    );
    context.subscriptions.push(disposable);
}

export function deactivate() {}

registerCommand 注册命令，命令名必须和 package.json 里声明的对应。context.subscriptions.push 确保扩展停用时自动清理资源。

注册命令和菜单

package.json 声明命令和快捷键：

json
"contributes": {
    "commands": [
        {
            "command": "myExtension.hello",
            "title": "Say Hello"
        }
    ],
    "keybindings": [
        {
            "command": "myExtension.hello",
            "key": "ctrl+shift+h",
            "mac": "cmd+shift+h"
        }
    ]
}

命令会出现在 Ctrl+Shift+P 命令面板里。

调试扩展

按 F5 启动调试——VSCode 会打开一个新的 VSCode 窗口（Extension Development Host），加载你的扩展。在源码里设断点，调试方式和普通 Node.js 程序一样。

修改代码后，在 Extension Development Host 里 Ctrl+R 重载窗口即可生效，不需要重启调试。

发布到扩展市场

bash
# 创建 Publisher（首次）
vsce create-publisher your-publisher-name

# 登录
vsce login your-publisher-name

# 打包发布
vsce publish

需要先在 Azure DevOps 创建 Personal Access Token 作为认证凭据。发布后几分钟内就能在 VSCode 扩展市场搜到。

只打包不发布：vsce package 生成 .vsix 文件，可以手动安装（code --install-extension my-extension.vsix）供内部使用。

标签：VSCode