VS Code 插件开发初体验
阿宅 / 2021-03-17 / 工具 / 阅读量 143

VS Code 插件开发初体验


插件能做什么?

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


如何开发插件?

首先 Node 和 Git 必不可少,然后安装YeomanVS Code Extension Generator的依赖

npm install -g yo generator-code

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

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 字段,如:scriptsdependencies,还加入了一些VS Code独有的字段,如:publisheractivationEventscontributes等。

  • namepublisher: VS Code 使用<publisher>.<name>作为一个插件的 ID。你可以这么理解,myFirstPlugin 例子的 ID 就是jeremy_hxj.myfirstplugin。VS Code 使用 ID 来区分各个不同的插件。
  • main: 插件的主入口。
  • activationEventscontributes: 激活事件 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对象。当激活事件触发时, 插件就会被激活. 下面是可用的激活事件列表:

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

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

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

发布内容配置

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

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

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

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

image-20210317173125850

插件入口文件

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

vscode模块包含了一个位于node ./node_modules/vscode/bin/install的脚本,这个脚本会拉取package.jsonengines.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命令后,就会出现这样的信息提示:

信息提示