VS Code 插件开发初体验

插件能做什么？

下面我们看看使用插件API能做到些什么：

• 改变VS Code的颜色和图标主题——主题
• 在UI中添加自定义组件和视图——扩展工作台
• 创建Webview，使用HTML/CSS/JS显示自定义网页——Webview指南
• 支持新的编程语言——语言插件概览
• 支持特定运行时的调试——调试插件指南

如何开发插件？

首先 Node 和 Git 必不可少，然后安装Yeoman和VS Code Extension Generator的依赖

npm install -g yo generator-code

通过 yo 脚手架初始化一个仓库：

目录结构大致如下：

.
├── .vscode
│   ├── launch.json     // 插件加载和调试的配置
│   └── tasks.json      // 配置TypeScript编译任务
├── .gitignore          // 忽略构建输出和node_modules文件
├── README.md           // 一个友好的插件文档
├── src
│   └── extension.ts    // 插件源代码
├── package.json        // 插件配置清单
├── tsconfig.json       // TypeScript配置

插件清单

每个 VS Code 插件都必须包含一个package.json，它就是插件的配置清单。package.json混合了 Node.js 字段，如：scripts、dependencies，还加入了一些VS Code独有的字段，如：publisher、activationEvents、contributes等。

• name 和 publisher: VS Code 使用<publisher>.<name>作为一个插件的 ID。你可以这么理解，myFirstPlugin 例子的 ID 就是jeremy_hxj.myfirstplugin。VS Code 使用 ID 来区分各个不同的插件。
• main: 插件的主入口。
• activationEvents 和 contributes: 激活事件 and 发布内容配置
• engines.vscode: 描述了这个插件依赖的最低 VS Code API 版本。

postinstall 脚本: 如果你的engines.vscode声明的是1.54 版的 VS Code API，那它就会按照这个声明去安装目标版本。一旦vscode.d.ts文件存在于node_modules/vscode/vscode.d.ts，IntelliSense 就会开始运作，你就可以对所有 VS Code API 进行定义跳转或者语法检查了。

{
  "name": "myfirstplugin",
    "displayName": "myFirstPlugin",
    "description": "",
    "version": "0.0.1",
  "publisher": "jeremy_hxj",
    "engines": {
        "vscode": "^1.54.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:myfirstplugin.helloWorld"
    ],
    "main": "./dist/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "myfirstplugin.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        ...
    },
    "devDependencies": {
        ...
    }
}

激活事件

激活事件是在package.json中的activationEvents字段声明的一个JSON对象。当激活事件触发时, 插件就会被激活. 下面是可用的激活事件列表:

• onLanguage
• onCommand

• onDebug

  • onDebugInitialConfigurations
  • onDebugResolve
• workspaceContains
• onFileSystem
• onView
• onUri
• onWebviewPanel
• *

package.json的配置项都可以在插件清单中找到.

我们现在插件清单中的激活事件就是 onCommand，会在调用命令时激活。

"activationEvents": [
    "onCommand:myfirstplugin.helloWorld"
],

发布内容配置

发布内容配置（即 VS Code 为插件扩展提供的配置项）是pacakge.json插件清单的contributes字段，你可以在其中注册各种配置项扩展 VS Code 的能力。下面是目前可用的配置项列表：

• configuration
• commands
• menus
• keybindings
• languages
• debuggers
• breakpoints
• grammars
• themes
• snippets
• jsonValidation
• views
• viewsContainers
• problemMatchers
• problemPatterns
• taskDefinitions
• colors
• typescriptServerPlugins

我们现在插件清单中的发布内容配置了Hello World命令

    "contributes": {
        "commands": [
            {
                "command": "myfirstplugin.helloWorld",
                "title": "Hello World"
            }
        ]
    },

F5运行后就可以在命令面板中找到这个命令，调用后就会激活事件onCommand:myfirstplugin.helloWorld

插件入口文件

src/extension.ts插件入口文件会导出两个函数，activate 和 deactivate，你注册的激活事件被触发之时执行activate，deactivate则提供了插件关闭前执行清理工作的机会。

vscode模块包含了一个位于node ./node_modules/vscode/bin/install的脚本，这个脚本会拉取package.json中engines.vscode字段定义的VS Code API。这个脚本执行过后，你就得到了智能代码提示，定义跳转等TS特性了。

import * as vscode from 'vscode';

// 一旦你的插件激活，vscode会立刻调用下述方法
export function activate(context: vscode.ExtensionContext) {
  // 下面的代码只会在你的插件激活时执行一次
    console.log('Congratulations, your extension "myfirstplugin" is now active!');

  // 入口命令已经在package.json文件中定义好了，现在调用registerCommand方法
  // registerCommand中的参数必须与package.json中的command保持一致
    let disposable = vscode.commands.registerCommand('myfirstplugin.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from myFirstPlugin!');
    });

  // 在插件上下文中订阅
    context.subscriptions.push(disposable);
}

// 插件卸载
export function deactivate() {}

这样，我们的第一个基础插件，流程就清晰了：

1. 注册onCommand 激活事件：onCommand:myfirstplugin.helloWorld，所以用户可以在调用myfirstplugin.helloWorld命令后激活插件。
2. 使用contributes.commands 发布内容配置，绑定一个命令ID myfirstplugin.helloWorld，然后 Hello World命令就可以在命令面板中使用了。
3. 使用commands.registerCommand VS Code API 将一个函数绑定到你注册的命令IDmyfirstplugin.helloWorld上。

所以，当我们在命令面板中调用Hello World命令后，就会出现这样的信息提示：