初探 VS Code + Webview

本文作者为 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 方法。该方法需要传入一个唯一标识符、标题、视图类型和展示位置等参数。例如：