vscode插件开发入门

[Chenhw2017]

微软出品必属精品,vscode也不例外,微软大佬凭借其强大的开发与架构能力给予electron实现了跨平台的可拓展的轻量级编辑器,其很多强大的功能都是通过其插件拓展实现的

阅读这篇文章你将收获：

• 如何快速开发一个vscode插件
• 如何使用webview
• 插件的生命周期及相关常用api

同时我也需要有以下知识储备

• 了解TypeScript的使用（开发插件虽然是非必须，但还是建议使用TS）
• 熟悉es6

开发环境搭建

• Node
• vscode最新版本，因为如果不是最新版本可能无法调试，部分mac用户可能把vscode放到download里面导致vscode不能及时更新，请将其放到其他目录再手动更新
• 安装yeoman脚手架及yo的插件generator-code,npm i -g yo generator-code
• 执行yo code或者执行yo通过命令行选择相应的代码生成器

我们要做什么

我们今天就做个类型收藏小网站的功能，最终效果图如下：

项目结构

主要目录功能描述

• provider treeview列表的数据提供者及视图实现
• webview 实现webview逻辑目录
• extension.ts 插件的入口
• package.json 命令及视图定义文件，所有代码中注册的命令都要在这里定义

插件开发可以分为以下几步

1 ��使用yo生成插件模版
2 在package.json配置要用到的插件激活命令、相应的view命令
3 在activate生命钩子黎明定义相应命令对应的处理逻辑
4 实现TreeDataProvider
5 注册webview命令及相应处理逻辑

package.json说明

1 contributes.viewsContainers.activitybar:主要是定义右边tabbar

2 定义treeview,如果key等于上面activitybar的id，则这个view就属于那个bar里

3 如果这个view的id在activationEvents的onview注册了,那么这个view的展示就会促发activate钩子函数