VS Code 插件开发入门

VSCode开发

概述

VSCode 内置了扩展能力，从UI到编辑体验，几乎任何部分都能通过扩展(Extension) API 自定义和增强。

extensions 能做什么

• 改变 VS Code 外观 - Theming
• 在 UI 中增加自定义组件和视图 - Extending the Workbench
• 创建一个 webview 来展示用 HTML/CSS/JS 构建的自定义网页 - Webview Guide
• 支持新的编程语言 - Language Extensions Overview
• 支持指定运行时的调试 - Debugger Extension Guide

开发配置

• Node.js
• npm
• yeoman：npm i -g yo
• generator-code：npm i -g generator-code

脚手架 yeoman 可以根据一些命令行交互直接生成一个 demo 插件：

$ yo code

进入脚手架搭好的项目，用 VS Code 打开：

$ code .

在 VS Code 中按 F5，将插件代码进行编译，并在一个新的 Extension Development Host 窗口中运行。

在插件开发窗口命令行（Ctrl+Shift+p）中输入 Hello World 命令，触发插件提示。

在 VS Code 中对代码打断点即可进行调试。

扩展剖析

package.json

插件项目 package.json 的 main 字段指定了入口文件，如果项目使用 ts 的话，需要指向 tsc 编译后的 js 文件。
其中还需要关注两个字段：

• contributes：注册各类 Contribution Points 来扩展 VSCode 的基础能力，例如 "commands"、"menus" 等。
• activationEvents：包含事件类型和触发的具体事件。当事件被触发时，插件程序会被激活。

部分 package.json 内容如下：

{
    "name": "demo-sample",
    "displayName": "demo-sample",
    "description": "",
    "version": {
        "vscode": "^1.52.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvnets": [
        "onCommand:demo-sample.countingNumbers"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "demo-sample.countingNumbers",
                "title": "Count Nums"
            }
        ]
    },
}

activationEvents 中指定了触发插件的事件和命令 id，contributes 中指定了贡献点和命令设置，在启用插件的 command palette 中输入 title 即可触发命令事件，也可以直接输入 command 的内容来触发。

入口文件

入口文件中引入 vscode API 编写处理程序：

import * as vscode from 'vscode'
// activate 方法会在插件第一次被事件激活的时候执行
// 且只会执行一次
export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, you extension is now active!');
    // 使用 vscode API 注册命令
    // 需要命令id和一个回调函数
    let disposable = vscode.commands.registerCommand('demo-sample.countingNumbers', () => {
    vscode.window.showWarningMessage('3 2 1...');
    });
    context.subscriptions.push(disposable)
}
// deactivate 方法会在插件 deactivate 的时候执行，可以做一些清理工作
// deactivate 包括 VSCode 关闭、插件被停用、插件被卸载时三种情况
// 若是异步操作，需要返回一个 Promise
export function deactivate() {}