VSCode Webview API

webview API允许扩展在Visual Studio Code中创建完全可定制的视图。例如，内置的Markdown扩展使用webview来呈现Markdown预览。除了VS Code的原生api支持之外，webview还可以用来构建复杂的用户界面。

可以将webview看作是您的扩展控制的VS Code中的iframe。一个webview可以呈现这个框架中几乎所有的HTML内容，它通过消息传递与扩展通信。这种自由使webview变得非常强大，并打开了一个全新的扩展范围。

我应该使用webview吗?

Webviews是相当惊人的，但他们也应该被谨慎使用，只有当VS Code的本机API是不够的。webview占用大量的资源，运行在与普通扩展不同的独立上下文中。一个设计不佳的webview也很容易在VS Code中感觉格格不入。

在使用webview之前，请考虑以下几点:

• 这个功能真的需要存在于VS代码中吗?作为一个单独的应用程序或网站会更好吗?
• webview是实现你的功能的唯一方法吗?可以使用常规VS代码api吗?
• 你的webview会增加足够的用户价值来证明它的高资源成本吗?

记住:仅仅因为你可以用webviews做一些事情，并不意味着你应该这样做。但是，如果您确信需要使用webviews，那么本文将提供帮助。让我们开始吧。

webview API基础知识

为了解释webview API，我们将构建一个简单的扩展名为Cat编码。这个扩展将使用webview来显示猫写代码的gif(大概是VS Code)。在我们处理API的过程中，我们将继续向扩展添加功能，包括一个计数器，用于跟踪cat编写的源代码行数，以及当cat引入错误时通知用户的通知。

下面是Cat编码扩展的第一个版本的package.json。您可以在这里找到示例应用程序的完整代码。我们扩展的第一个版本提供了一个名为catCoding.start的命令。当用户调用此命令时，我们将显示一个简单的带有cat的webview。用户将能够从命令调色板中调用这个命令作为Cat编码:启动新的Cat编码会话，如果他们愿意，甚至可以为它创建一个键绑定。