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

最新推荐文章于 2024-09-09 17:41:02 发布

缤纷冷泪

最新推荐文章于 2024-09-09 17:41:02 发布

阅读量1.1w

点赞数 6

分类专栏： javascript 学习笔记

本文链接：https://blog.csdn.net/holdsky/article/details/111234085

版权

这篇博客介绍了如何在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"
                },
                {