VSCode插件开发--添加侧边栏入口和面板

这篇博客介绍了如何在VSCode中开发插件,包括创建工程、配置侧边栏的Tree View Container按钮和Tree View面板,以及定义面板的内容。通过配置`package.json`,设置SVG图标,实现侧边栏按钮与面板视图的联动。内容管理涉及`webview`、`vscode` API以及命令注册,最终展示了运行效果。
摘要由CSDN通过智能技术生成

先看一张图
在这里插入图片描述

在VSCode的文档中,侧边栏按钮入口称之为Tree View Container,侧边栏面板称之为Tree View,本文涉及的就是这两个区域。

创建工程

使用 yo code脚手架创建一个插件工程,语言选择TypeScript。具体过程略

配置侧边栏按钮(Tree View Container)和面板视图(Tree View)

侧边栏按钮(Tree View Container)和面板视图(Tree View)要同时配置,否则不生效。

打开package.json,添加以下内容

"contributes": {
   
        "viewsContainers": {
   
            "activitybar": [
                {
   
                    "id":"sidebar_test",
                    "title": "侧边栏测试",
                    "icon": "入口.svg"
                }
            ]
        },
        "views": {
   
            "sidebar_test":[
                {
   
                    "id":"sidebar_test_id1",
                    "name":"面板区块名称1"
                },
                {
   
                    
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值