作者：HelloGitHub-小夏
说起VSCode大家普遍印象应该都差不多是这样：不就是个编辑器嘛，最主要的还是coding的快感咯。
里面很多功能都应该是围绕如何提高coding效率、减少coding出错率、解放coder小哥哥小姐姐的劳动力等等，至于代码以外的东西比如预览什么的，就交给浏览器咯。
所以可能很少有人会把VSCode和WebView联想到一起。
一、随处可见的WebView
但是我相信，你一定在很多“有名”的VSCode插件中接触过它（WebView）的身影。比如可以在VSCode中画流程图的vscode-drawio：
上班摸鱼的同时还要继续提升自我来刷题的vscode-leetcode：
还有上班摸鱼的同时还要关心能否从一颗“小韭菜”实现财富自由的「韭菜盒子」leek-fund：
所以你可以看到，有了WebView来拓展能力，插件市场才会变得“百花齐放”，能满足各类人各类摸鱼的需求。但是上面项目的成功，也不仅仅靠的是我们本文介绍的简单的WebView的能力，如果你对上面几个项目有深挖的兴趣，可以直接clone代码，一瞅到底，说不定下一个厉害的插件就是出自你手啦。
二、WebView到底是什么
前面有提过VSCode允许我们在它给的规则之下可以自定义很多功能，但是视图这一块，其实我们自定义的范围非常小，这就限制了程序员们天马行空的创造力。但是自由的灵魂不会被眼前的困难打败，同行之间的心心相惜所以有了WebView的诞生。
当然这都是小编自己内心OS的，不过可以确定的是WebViewAPI的存在允许在VSCode中扩展创建完全可自定义的视图。例如：内置的Markdown扩展使用webviews来呈现Markdown预览。Webviews还可用于构建超出VSCode的本机API支持的复杂用户界面。
你也可以简单的把WebView理解为VSCode内部的iframe。WebView可以在这个框架中渲染几乎所有的HTML内容，还可以使用消息传递与扩展进行通信。这种自由使得webviews非常强大，而且也拥有了一个全新的扩展范围。
三、创建一个简单的WebView
从第一点的例子你就应该可以体会到WebView的功能拓展有多强大，它不仅可以作为自定义编辑器的视图来扩展提供自定义UI以编辑工作区中的任何文件。还允许在侧边栏或面板区域的WebView中继续呈现WebView视图等等。
如果你感兴趣，可以去
