问：如何开发VS Code插件？

辰九九
301 阅读4分钟

背景介绍

在我们的日常开发中，插件扮演着重要的角色。其中经常接触到的有2种，分别是VS Code插件和浏览器插件，vs code插件和浏览器插件的不同点在于，VS Code插件主要用于提高开发效率，而浏览器插件主要用于改善我们的使用体验

本篇将介绍一下VS Code插件开发的步骤和注意事项

准备工作

  1. VS Code
  2. Node.js
  3. Git
  4. Yeoman 帮助我们启动新项目的一个生成器生态系统
  5. VS Code Extension Generator

插件开发

开发步骤

npm install -g yo generator-code

可能遇到这个报错

image.png

使用管理员权限安装

 sudo npm install -g yo generator-code

image.png

查看yo版本，提示找不到 stream 包

yo v

image.png

可能是node不是最新版本导致的，安装最新版本node，并重新安装yo

image.png

接下来生成我们的项目

yo code

然后我们就得到了一个初始化后的vs code插件代码，f5 启动项目

触发通知，没有效果，提示“没有匹配的命令”

image.png

image.png 参考 stackoverflow.com/questions/5… 可知，是我们的vscode版本过大，我本地vscode版本为1.88.0

image.png

插件中的vscode版本比本地的大，所以插件不会生效

image.png

修改package.json 中vscode版本为1.72.0（小于等于实际vscode版本即可）

image.png

重新install，再次运行插件，输入 Hello World 命令后激活插件，现在就可以正常弹出我们的消息通知了

image.png

image.png

到现在，我们完成了一个最基础的vscode插件安装和运行，下面一起看看插件的结构吧

插件结构

我们新建的插件包括3个部分：

  1. 注册onCommand 激活事件：onCommand:extension.helloWorld，允许我们在输入Hello World命令后激活插件
  2. 使用contributes.commands 发布内容配置，绑定一个命令IDextension.helloWorld，然后Hello World命令就可以在命令面板中使用了，对应package.json中这部分代码

image.png

  1. 使用commands.registerCommand VS Code API将一个函数绑定到我们注册的命令IDextension.helloWorld上，对应extenson.ts这部分代码

image.png

一个插件的基础目录如下所示（来源vscode官网）

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

extension.ts 文件作为插件的入口文件，会导出 activate 和 deactivate 2个方法，当注册的激活事件被触发时会执行 activate，而deactivate则提供了插件关闭前执行清理工作的时机

package.json 文件保存插件的相关配置，注意 vscode.commands.registerCommand 里的命令要和 package.json 文件配置的命令一致。

image.png

生命周期

当我们按下 F5时发生了什么？

按下 F5 调试，自动打开一个新的 vscode 窗口，触发 package.json 中的activationEvents 配置项，extension.ts文件开始执行，其中activate 方法会将功能注册，通过 vscode.commands.register...相关api为package.json中的contributes配置项中的事件绑定方法或者监听器

这样当我们在命令框输入命令时，插件被激活就会执行命令所绑定的事件

插件架构

vs code通过Electron实现跨平台，为每个窗口创建一个进程专门执行插件——Extension Host

image.png

  1. 创建GUI相关接口只由主进程调用
  2. 每个工作区（workbench）对应一个进程，也是BrowserWindow实例
  3. 插件进程（单独开一个进程，不影响启动速度，不影响主进程和渲染进程，不能直接修改UI，但是UI可扩展性差）fork了渲染进程，每个插件都运行在一个NodeJS宿主环境，即插件共享进程
  4. Debug进程
  5. Search进程，搜索是密集型任务，单独一个进程
  6. 进程间通信使用IPC、RPC

写在最后

以上我们实践了插件的基本开发，分析了插件的目录结构，同时，这只是vscode插件开发的一个小开头，开发流程还有许多东西值得我们去关注，包括调试、测试、构建和打包等

参考

VS Code 插件开发官方文档 code.visualstudio.com/api

VS Code 提供的功能演示插件源码 github.com/microsoft/v…

中文文档翻译参考 www.bookstack.cn/read/VS-Cod…

juejin.cn/post/696960…

avatar
文章
阅读
粉丝