VS Code插件开发教程--树视图+网页视图--完整demo+图--2

简介

你好！

本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。

本文定位为初次接触vs code插件开发的小伙伴，开始有详细的教程如何一步一步的运用基础的插件开发

接下来会用完成的 demo 教大家 treeView 和 webView 的初级完成开发流程。小伙伴耐心跟着代码敲一遍能学会的哈。

先给小伙伴们看一下本文的目录架构：

• 一、介绍
• 二、安装
• 三、初识 VS code 插件 demo
• 四、treeView: 重识 package.json
• 五、treeView: 在视图中显示想要的 item
• 六、创建 webView 并嵌入百度页面
• 七、不同 item 显示不同的页面(数据传递: VS code -> html)
• 八、iframe 页面的数据传递指 VS code(iframe -> html -> vscode)

此文章为第二部分，如需从头开始阅读，请移步第一部分

四、treeView: 在视图中显示想要的 item

首先，我们先在 src 下创建 TreeViewProvider.ts 文件。重要的代码都展示在这里了。

import {
    TreeItem, TreeItemCollapsibleState, TreeDataProvider, Uri, window } from 'vscode';
import {
    join } from 'path';

这里重点讲解一下上面这两句代码：

vscode 提供了很多的 API 让我们使用，我们可以打开官网 VS code API

我讲解一下上面需要用到的几个项：

TreeItem:

创建 TreeItem 类型的构造函数，传递参数 label、collapsibleState.

label: tree 该项的标题。

collapsibleState: 该项是否折叠状态。参数有三： Collapsed(折叠状态)、Expanded(展开状态)、None(无状态)。

?: 代表参数为非必填项，可不传。注意：非必填项，必须放在最后面

TreeItemCollapsibleState: 就是 collapsibleState 的类型。

TreeDataProvider: 为树数据的数据提供程序(如果不理解，可以先放着，一会看代码)。

Uri: 通用资源标识符，表示磁盘上的文件或其他资源(用来读取文件路径)。

join: 用来拼接文件路径。

import {
    TreeItem, TreeItemCollapsibleState, TreeDataProvider, Uri, window } from 'vscode';
import {
    join } from 'path';

// 创建每一项 label 对应的图片名称
// 其实就是一个Map集合，用 ts 的写法
const ITEM_ICON_MAP = new Map<string, string>([
    ['pig1', 'pig1.svg'],
    ['pig2', 'pig2.svg'],
    ['pig3', 'pig3.svg']
]);

// 第一步：创建单项的节点(item)的类
export class TreeItemNode extends TreeItem {
   

    constructor(
        // readonly 只可读
        public readonly label: string,
        public readonly collapsibleState: TreeItemCollapsibleState,
    ){
   
        super(label, collapsibleState);
    }

    // command: 为每项添加点击事件的命令
    command = {
   
        title: this.label,          // 标题
        command: 'itemClick',       // 命令 ID
        tooltip: this.label,