vscode和插件开发详解

vscodevscode的官方源码下载地址：https://github.com/microsoft/vscode我们可以将vscode源码运行起来看演示效果，假设我们将vscode源码下载到这个目录下：D:\new-vscode\vscode-master，那么运行步骤如下：vscode运行1.打开cmd命令行，进入到D:\new-vscode\vscode-ma...

文章共5,401字 · 阅读需要大约19分钟

一键AI生成摘要，助你高效阅读

问答

zhouhangzooo

12010人浏览 · 2019-09-16 14:14:03

zhouhangzooo · 2019-09-16 14:14:03 发布

vscode

vscode的官方源码下载地址：https://github.com/microsoft/vscode

我们可以将vscode源码运行起来看演示效果，假设我们将vscode源码下载到这个目录下：

D:\new-vscode\vscode-master，那么运行步骤如下：

vscode运行

1.打开cmd命令行，进入到D:\new-vscode\vscode-master,执行监听命令；

再打开一个cmd命令行，执行运行命令；

等待片刻，我们可以看到运行效果了。

vscode开发

在开发之前，我们需要对vsocde有一个整体的认识，事实上，vscode是一个html页面，如图：

界面大致可以分为六部分：

1.标题栏titlebar 包含其中左边的（包括文件~帮助）为菜单栏menubar

2.活动栏activitybar

3.侧边栏sidebar

4.编辑器editor

5.终端及输出等panel

6.状态栏statusbar

可以通过"切换开发人员工具"，快捷键为Ctrl+Shift+I打开查看，效果相当于在浏览器的F12；

所以当我们需要修改vsocde界面的时候，往往就是修改相关的html和css，但vscode界面的元素一般不写在html，而是在ts文件中动态生成的，所以vscode的界面一般有ts和css组成，如下图是部分源码截图：

在工作上，我们都是按照需求来进行开发的，下面我们增加一个需求，在vscode的标题栏上增加一个登录按钮。首先我们先找到标题栏的ts和css，分别为titlebarPart.ts和titlebarPart.css，我们是如何确定titlebarPart.ts文件的呢？

首先我们通过Ctrl+Shift+I，如下图：

找到标题栏的class，然后在官方vscode中打开我们要修改的源码，然后根据class也就是titlebar去搜索此关键字，打开搜索结果的文件，对ts文件的代码查看，而上图中的class为titlebar，是和搜索结果中的css文件定义的样式对应的，如下图中红框；所以最终我们确定为titlebarPart.ts和titlebarPart.css的代码是对标题栏进行操作的。

我们仿照右上角的按钮来进行修改，增加如图代码，我们在titlebarpart.css中.part.titlebar的里面增加.window-custom-login元素；

当我们增加了css样式的时候，还需要在titlebarPart.ts中渲染出来，代码如下：

private windowControls_login: HTMLElement;

至此，我们就实现了在标题栏中增加登录按钮功能了。效果如下图：

vscode快捷方式

通过设置-> 键盘快捷方式，可以打开查看所有的vsocde命令

这些命令在vscode源码中经常出现，像打开文件或者保存功能，我们可能在别的地方需要用上这些功能，通过拷贝命令即可得到，如拷贝打开文件命令得到

workbench.action.files.openFile

vscode命令注册和使用

在源码中调用上方的命令：

import { ICommandService, CommandsRegistry } from 'vs/platform/commands/common/commands';

export class test

{

constructor(

@ICommandService private readonly commandService: ICommandService,

)

}

this.commandService.executeCommand('workbench.action.files.openFile'));

这样我们就可以调用vscode中所有的命令了。

在vscode插件：

const vscode = require("vscode");

/* 注册 */

vscode.commands.registerCommand('extension.newCourseDir', function (data) {

}

/* 使用 */

vscode.commands.executeCommand("extension.newCourseDir");

vscode插件

vscode插件属于vscode源码的一个扩展功能，有时候我们需要在vscode中增加一个功能的时候，我们可以写成一个插件，在插件里面进行编码，插件代码可以是JavaScript或者是typescript语言。

vscode插件开发可参考官方文档：

https://code.visualstudio.com/api

安装node.js和Git

在本主题中，我们将教您构建扩展的基本概念。确保安装了Node.js和Git，然后安装Yeoman和VS Code Extension Generator：

npm install -g yo generator-code

创建插件的模板

右击打开Git Bash Here，输入

yo code

输入后如图所示

选择插件语言

这里我推荐使用第二个（JavaScript），按一下下箭头，然后回车，注意按下箭头的时候，界面不会出现变化，但是实际已经选择了。出现下图（红框是语言类型）

提示我们输入插件的名字，这里我们输入test，回车；

提示我们输入插件唯一id，这里我们输入test，回车；

提示我们输入插件描述，这里我们输入test，回车；

提示我们是否启用“jsconfig.json”中的JavaScript类型检查?这里我们输入y，回车；

提示我们是否初始化git仓库，这里我们输入n，回车；

创建插件完成

当出现下图的时候，那插件创建完成了。

如何创建一个vscode插件呢？

图A

如上图A，我们如何写一个课程功能，在1234每个区域显示我们需要的数据。

我们在vscode中打开这个test文件夹，在vscode上开发修改将比较方便；

首先如何显示图A中的1区域显示一个按钮呢？

打开package.json，我们在“contibutes”节点下增加如下代码：

"viewsContainers": {

"activitybar": [

{

"id": "test_id",

"title": "测试",

"icon": "images/todo-tree-container1.svg"

}

]

"views": {

"test_id": [

{

"id": "test_ID",

"name": "测试列表"

}

]

}

当

我们F5运行，会出现下图多了一个按钮，看，这就是我们上面代码加的图标

接下来我们在图A增加2区域的数据

这里说一下，2区域的数据其实就是树视图的数据，官方文档介绍的了两个方法registerTreeDataProvider和createTreeView。

https://code.visualstudio.com/api/references/vscode-api

registerTreeDataProvider，顾名思义就是注册树视图数据提供者，我们传入一个树视图的ID,然后在创建一个树视图的类，在类中写我们想要显示在树视图的数据，这样我们就可以将树视图数据显示出来。也就是在图A的2区域显示数据。如果不理解，我们写一段代码看看。

我们先创建一个CourseTreeProvider.js作为TreeDataProvider，我们再看看TreeDataProvider有哪些方法？

https://code.visualstudio.com/api/references/vscode-api#TreeDataProvider

我们通过官方文档了解这个TreeDataProvider有了哪些方法，方法都有什么用了，接下来我们贴出实现的代码：

CourseTreeProvider.js

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });

const vscode = require("vscode");

class MyTreeProvider {

constructor() { }

static initMyTreeList() {

let myTreeProvider = new MyTreeProvider();

vscode.window.registerTreeDataProvider("test_ID", myTreeProvider);

}

getTreeItem(element) {

return element;

}

getChildren(element) {

let trees = [];

let temp1 = new vscode.TreeItem("测试1");

let temp2 = new vscode.TreeItem("测试2");

let temp3 = new vscode.TreeItem("测试3");

trees.push(temp1);

trees.push(temp2);

trees.push(temp3);

return new Promise(resolve => {

return resolve(trees);

});

}

exports.MyTreeProvider = MyTreeProvider;

//# sourceMappingURL=CourseTreeProvider.js.map

我们在initMyTreeList()方法中注册树视图对象，test_ID是package.json中视图容器的id。

我们还实现了TreeDataProvider对象的getTreeItem()和getChildren()，我们在getChildren显示我们想要显示的数据，这里我们简单的显示数据，就使用vscode.TreeItem()，这个TreeItem第一个属性label是树视图中每一个Item的名字。

最后，我们打开extension.js文件，我们先将activate()函数里面的代码删除，activate()是插件激活后执行的方法，其实就是插件入口，在这可以做一些初始化的操作，调用CourseTreeProvider.js的MyTreeProvider中的initMyTreeList()方法，完整代码如下图：

F5运行，最终我们发现树视图没有显示数据，为什么呢？我们看package.json中activationEvents节点，这个是插件在什么时候激活，默认创建的插件是当extension.helloWorld调用时激活，这里我们改为“*”即为插件启动就激活。

再次按F5运行，我们发现终于显示数据了。

实际上，我们想要在树视图中显示的数据是比较多元化的，可能是树结构等；

具体看课程插件的代码，这里我们给出实现的思路：

重点在getChildren(element)方法中，我们自定义一个myTreeNode继承vscode.TreeItem，

我们可以给myTreeNode添加一个标识，比如树结构第一节点是a,第二节点是b，第三节点是c，那么在getChildren(element)中先new myTreeNode(“a”)，注意这里的myTreeNode里面还有其他属性，“a”只是其中的一个属性，我们判断如果是当前element的标识是a，那么就再new myTreeNode(“b”),如果新创建的element的标识是b，那么在创建new myTreeNode(“c”)，这样当我们点击a标识的元素时，就会显示b标识的元素，点击b标识的元素就会显示c标识的元素。从而达到树结构的目的。

接下来还是回归我们的主题，创建4个区域。

区域3是vscode编辑器，主要是通过打开文件的方式显示所需要的东西，如打开一个cpp文件可在上面写代码然后在区域4中点击提交到后台；

区域4是一个webview，你可当成是html，接下来我们看如何生成这个webview的，vscode给我们提供了方法。

前面我们说过“vscode命令注册和使用”，接下来我们再来温习一遍。

我们在extension.js的activate中注册一个命令，然后在显示树视图时调用命令，代码：

在activate里：

context.subscriptions.push(vscode.commands.registerCommand('extension.demo.openWebview', function (uri) {

//创建webview

createCourseWebview(uri);

}));

function createCourseWebview(uri){

if (flag) {

return;

}

var panel = vscode.window.createWebviewPanel('testWebview', "课程内容", vscode.ViewColumn.Two, {

enableScripts: true,

retainContextWhenHidden: true,

enableFindWidget: true,

});

flag = true;

panel.webview.html = getWebViewContent(context, 'src/test-webview.html');

panel.onDidDispose(() => {

flag = false;

}, null, context.subscriptions);

}

function getWebViewContent(context, templatePath) {

const resourcePath = util.getExtensionFileAbsolutePath(context, templatePath);

const dirPath = path.dirname(resourcePath);

let html = fs.readFileSync(resourcePath, 'utf-8');

html = html.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {

return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({

scheme: 'vscode-resource'

}).toString() + '"';

});

return html;

}

createCourseWebview

是创建webview的方法，通过vscode.window.createWebviewPanel方法创建并显示新的Webview面板，panel.webview.html是给网页视图添加添加html文档。getWebViewContent是对html进行处理最终返回一个字符串的html内容。flag是我们对webview进行控制，如果创建一个就不创建了，关闭的时候将flag标识更改。

我们在src目录下增加一个html，名为test-webview.html。