本文作者为 360 奇舞团前端开发工程师
介绍
VSCode 是一个非常强大的代码编辑器,而它的插件也非常丰富。在开发中,我们经常需要自己编写一些插件来提高开发效率。本文将介绍如何开发一个 VSCode 插件,并在其中使用 Webview 技术。首先介绍一下什么是Webview。
什么是 Webview?
Webview 是一种可以在 VS Code 中嵌入 Web 内容的技术。通过 Webview,开发者可以将自己的 Web 应用程序嵌入到 VS Code 中,以便在工具中执行各种任务。Webview 提供了一个 Web 浏览器的环境,可以在其中加载 HTML、CSS 和 JavaScript,从而实现各种功能。Webview 还提供了一个 API,使得开发者可以从 Web 应用程序中与 VS Code 进行交互。webview API为开发者提供了完全自定义视图的能力,Webview也能用于构建比VS Code原生API支持构建的更加复杂的用户交互界面。可以把webview看成是VS Code中的iframe,它可以渲染几乎全部的HTML内容,它通过消息机制和插件通信。这样的自由度令我们的webview非常强劲并将插件的潜力提升到了新的高度。接下来我们一起来学习。
1. 创建一个空的 VSCode 插件
首先,我们借助脚手架yomen和generator-code来快速生成项目框架:安装依赖
npm install -g yo generator-code
初始化一个 VS Code插件项目
yo code
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension? HelloWorld
? Initialize a git repository? No
? Which package manager to use? npm
等待安装依赖完成
code ./helloworld
以下为初始化的项目结构
2. 在插件中创建一个 Webview
在插件中创建一个 Webview,需要使用 vscode 模块中的 window.createWebviewPanel 方法。该方法需要传入一个唯一标识符、标题、视图类型和展示位置等参数。例如: