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

iDo
2,189 阅读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编写插件详细过程》

avatar
文章
阅读
粉丝