图/神梦无边 文/哎实习生
有些项目会有这样的需求,为开发人员搭建一套开发环境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 不太懂可以查看公众号之前发布的文章
-
选择创建项目后有四个输入和一个选择
-
输入你扩展的名称
-
输入一个标志(项目创建的文件名称用这个)
-
输入对这个扩展的描述
-
问你要不要创建一个git仓库用于版本管理
-
选择使用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 全局api
import * 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 需要的需求:
-
类似微信web 开发者工具的代码编译、代码预览、代码压缩并提交至云端、用户登录功能;
-
针对不同类型文件的代码提示功能;
这里我简单介绍了 VSCode 插件开发的基本步骤,下一节我将会详细分析 VSCode 的开源代码。从布局开始,剖析code的运行机制,插件的插拔机制。
部分图片、文字摘取自:
cnblogs:《vscode编写插件详细过程》