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

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 类型的构造函数,传递参数 labelcollapsibleState.

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,        
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值