搭建项目开发工具IDE:如何编写 VSCode 插件

1,814 阅读6分钟
原文链接: mp.weixin.qq.com

图/神梦无边 文/哎实习生
有些项目会有这样的需求,为开发人员搭建一套开发环境IDE,包含调试窗口、编辑窗口、一系列其他操作 ;说的通俗一点就是做一个类似微信小程序的微信web开发者工具这样的产品。我仔细思考了一下, VSCode本身是一款开源产品,采用Electron和插件配置 也能很容易对其界面和功能进行二次开发;于是有了这篇文章,根据时间来记录我的探索。( 如果长时间停更了,说明我踩到了无法逾越的坑了_)
  • 公司目前已有类似产品——weTerm,具体实现我不太清楚,就界面和配置文件来看应该是基于 VSCode的二次开发;

  • 每个阶段的发现,记录在Github:https://github.com/git-yx/vscode


一、开发环境介绍与安装
  • 安装Visual Studio Code,我们可以先到官网下载一最新版本的来进行安装,下载完后点击安装,然后一直下一步安装就可以;(注意:创建插件模板之后,会强制你更新 VSCode至最新版本,否则运行插件会报error)

  • 安装NodeJs ,选择最近的LTS版本即可;

  • 在安装完上面两个工具后,我们还需要一个生产插件代码的工具,也就是Yeoman 和VS Code Extension generator;Yeoman 的介绍不在本文章中,具体信息可以访问Yeoman;

  • ★具体命令为:npm install -g yo generator-code


二、生成插件基本结构

在环境配置完成以后,就能使用 yo 命令来生成项目基本结构了。

  • 使用yo 命令来生成插件基本结构:yo code 

可以根据自己需要选择需要的模板类型,此处我选择第一项:> New Extension (TypeScript),如果对于typescript  不太懂可以查看公众号之前发布的文章

  • 选择创建项目后有四个输入和一个选择

 

  1. 输入你扩展的名称

  2. 输入一个标志(项目创建的文件名称用这个)

  3. 输入对这个扩展的描述

  4. 问你要不要创建一个git仓库用于版本管理

  5. 选择使用NPM 还是Yarn 来管理依赖

 

  • 依次回答列举的几个问题,然后就能得到一个崭新的模板了~ 

  • 项目初始化之后会得到这样的目录结构:

├── .vscode                     // VS Code的整合│   ├── launch.json│   ├── settings.json│   ├── extensions.json│   └── tasks.json├── .vscodeignore                //配置不需要加入最终发布到拓展中的文件├── README.md├── src                         // 源文件│   └── extension.ts            // 如果我们使用js来开发拓展,则该文件的后缀为.js│   └── test                        // test文件夹├── node_modules├── out                         // 编译之后的输出文件夹(只有TypeScript需要,JS无需)├── package.json                // 该拓展的资源配置文件├── tsconfig.json               // ts配置└── vsc-extension-quickstart.md

三、插件运行和简单修改

  • 介绍完目录结构后,我们可以来运行一下看看效果如果。我们打开一个VSCode 并把我们的插件目录自己拖到vscode的界面上;选择调试窗口,并点击开始调试或者直接按快捷键 F5 

然后我们能看到,VSCode 重新打开了一个窗口:按住 Ctrl + P 可以测试模板命令> hello world

我们可以看到扩展插件已经正常的运行了,接下来我们可以来简单修改一下代码以实现不同的简单功能。在修改之前需要简单的认识两个文件。

(★) package.json

{    "name": "first-extension",    "displayName": "first extension",    "description": "the first step to create vscode extension",    "version": "0.0.1",    "engines": {        "vscode": "^1.36.0"    },    "categories": [        "Other"    ],    "activationEvents": [                                       // 这是我们要理解的地方,是触发插件执行一些代码的配置       "onCommand:extension.helloWorld"             //这种是通过输入命令来触发执行的    ],    "main": "./out/extension.js",                           //这个是配置TypeScript编译成js的输出目录    "contributes": {        "commands": [{                                       //title 和command是一个对应关系的            "command": "extension.helloWorld",          //这个是对应上面那个命令触发的,在代码里面也要用到            "title": "Hello World"                           //这个是我们在vscode里面输入的命令        }]    },    "scripts": {                                               //是在发布打包,或者其他运行时候,要执行的一些脚本命令        "vscode:prepublish": "yarn run compile",        "compile": "tsc -p ./",        "watch": "tsc -watch -p ./",        "pretest": "yarn run compile",        "test": "node ./out/test/runTest.js"    },    "devDependencies": {                                //这是开发的依赖包,如果有其他的依赖包,并要打包的话,需要把dev去掉        "@types/glob": "^7.1.1",        "@types/mocha": "^5.2.6",        "@types/node": "^10.12.21",        "@types/vscode": "^1.36.0",        "glob": "^7.1.4",        "mocha": "^6.1.4",        "typescript": "^3.3.1",        "tslint": "^5.12.1",        "vscode-test": "^1.0.0-next.0"    }}

(★) extension.ts

这个文件我简单梳理了一下,将英文去掉了,增加了一些简单描述。

// 导入vscode 全局apiimport * as vscode from 'vscode';                  // 暴露命令被激活执行函数// 键盘组合键ctrl + p 可以输入指令export function activate(context: vscode.ExtensionContext) {        // 当接收到指令执行生命周期    console.log('ext is now active!');        // 命令定义在package.json内,此处匹配命令执行函数    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {       vscode.window.showInformationMessage('Hello World!');    });    // 挂载执行函数到vscode上下文中   context.subscriptions.push(disposable);}// 暴露命令被冻结执行函数export function deactivate() {    console.log('ext is now deactive!');}

这两个文件是很重要的,基本整个插件编写都是围绕着这两个文件来修改的,例如我们现在要增加多一个命令叫做 hello 那么我们先在 package.json 里面添加两个配置

..."activationEvents": [   "onCommand:extension.helloWorld",   "onCommand:extension.hello"],"contributes": {    "commands": [{        "command": "extension.helloWorld",        "title": "Hello World"    },{                 "command": "extension.hello",        "title": "hello"    }]}...

添加完这两个配置后,我们就需要在 extension.ts 里来注册这个命令事件

// 根据package.json 来注册extension.hello 命令let hello = vscode.commands.registerCommand('extension.hello',()=>{    // vscode 的提示接口   vscode.window.showInformationMessage('hello ~');});// 挂载命令到上下文中context.subscriptions.push(hello);

修改之后再次运行,会发现多了一个hello  的命令。


四、打包与发布

这里我只介绍将插件打包成本地插件文件,我们的目的是搭建自己的IDE环境,今后只需要搭建一个云存储来存放开发者开发的 ext插件即可,不需要上传至微软的仓库中。

这里介绍 VSCode插件打包工具 vsce:

  • 作用:将已经写好的插件代码打包成vsix  文件,便于插件管理;

  • 安装:yarn add vsce 或者npm install vsce

    一、执行打包

  • cd 到项目目录下,执行命令vsce package :顺利的话就能在项目根目录下找到项目名- 版本号.vsix的文件。

  • 错误踩坑:

在package.json 文件中增加字段 "publisher": "xxx"即可;

    二、使用插件

        按照下图找到vsix 文件安装入口,选择已经打包好的vsix  文件即可。

安装完成后,即可在插件->已安装插件 找到自己刚刚安装的插件(如果没找到,请重启VSCode)


五、归纳整理

这里只介绍了 VSCode 的命令接口,其实VSCode还提供了各种类型的相当多的接口。我们可以根据自己需要来调用合适的接口满足自己的需求。以下,我列举几个常见的 IDE 需要的需求:

  1. 类似微信web 开发者工具的代码编译、代码预览、代码压缩并提交至云端、用户登录功能;

  2. 针对不同类型文件的代码提示功能;

这里我简单介绍了 VSCode 插件开发的基本步骤,下一节我将会详细分析 VSCode 的开源代码。从布局开始,剖析code的运行机制,插件的插拔机制。


部分图片、文字摘取自:

cnblogs:《vscode编写插件详细过程》