江苏龙网

  1. 主页 > 生活百科 > >

解锁 VS Code 更多可能性，轻松入门 WebView

VS Code


解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
作者：HelloGitHub-小夏
说起 VS Code 大家普遍印象应该都差不多是这样：不就是个编辑器嘛，最主要的还是 coding 的快感咯 。
里面很多功能都应该是围绕如何提高 coding 效率、减少 coding 出错率、解放 coder 小哥哥小姐姐的劳动力等等，至于代码以外的东西比如预览什么的，就交给浏览器咯 。
所以可能很少有人会把 VS Code 和 WebView 联想到一起 。
一、随处可见的 WebView但是我相信，你一定在很多“有名”的 VS Code 插件中接触过它（WebView）的身影 。比如可以在 VS Code 中画流程图的 vscode-drawio：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
上班摸鱼的同时还要继续提升自我来刷题的 vscode-leetcode：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
还有上班摸鱼的同时还要关心能否从一颗“小韭菜”实现财富自由的「韭菜盒子」 leek-fund：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
所以你可以看到，有了 WebView 来拓展能力，插件市场才会变得“百花齐放”，能满足各类人各类摸鱼的需求 。但是上面项目的成功，也不仅仅靠的是我们本文介绍的简单的 WebView 的能力，如果你对上面几个项目有深挖的兴趣，可以直接 clone 代码，一瞅到底，说不定下一个厉害的插件就是出自你手啦 。
二、WebView 到底是什么前面有提过 VS Code 允许我们在它给的规则之下可以自定义很多功能，但是视图这一块，其实我们自定义的范围非常小，这就限制了程序员们天马行空的创造力 。但是自由的灵魂不会被眼前的困难打败，同行之间的心心相惜所以有了 WebView 的诞生 。
当然这都是小编自己内心 OS 的，不过可以确定的是 WebView API 的存在允许在 VS Code 中扩展创建完全可自定义的视图 。例如：内置的 Markdown 扩展使用 webviews 来呈现 Markdown 预览 。Webviews 还可用于构建超出 VS Code 的本机 API 支持的复杂用户界面 。
你也可以简单的把 WebView 理解为 VS Code 内部的 iframe 。WebView 可以在这个框架中渲染几乎所有的 html 内容，还可以使用消息传递与扩展进行通信 。这种自由使得 webviews 非常强大，而且也拥有了一个全新的扩展范围 。
三、创建一个简单的 WebView从第一点的例子你就应该可以体会到 WebView 的功能拓展有多强大，它不仅可以作为自定义编辑器的视图来扩展提供自定义 UI 以编辑工作区中的任何文件 。还允许在侧边栏或面板区域的 WebView 中继续呈现 WebView 视图等等 。
如果你感兴趣，可以去官网继续学习 。今天我们下文谈的主要还是最简单的一种方式：在编辑器中创建一个简单的 WebView 面板 。
1、配置命令第一步首先肯定是配置命令啦，我们再次打开package.json文件，新配置一个command：
"contributes": {"commands": [..., // 省略其他命令{"command": "webview.start","title": "open a webview page","category": "HelloGitHub webview"}],... // 省略其他配置项}配置完之后要把这个新的命令在 extension.js 中注册一下：
function activate(context) {... // 省略其他命令注册const webviewCommand = vscode.commands.registerCommand('webview.start', () => {// 创建和展示一个 webviewconst panel = vscode.window.createWebviewPanel('hgWebview', // 定义 webview 的类型，用于内部'HelloGitHub webview', // 给用户展示的标题vscode.ViewColumn.One, // 在第几栏编辑器里展示这个 webview{} // 其他 Webview 配置.);}); context.subscriptions.push(webviewCommand); // 这里可以放多个，用,分隔即可}配置完之后看一眼效果，让我们运行起来我们的插件：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
你可以看到这个标题就是我们上面在 package.json 上配置的“HelloGitHub webview”，或许有同学会对 ViewColumn 这个配置疑惑 。
那我们来看一下这里到底都有些什么值：
解锁 VS Code 更多可能性，轻松入门 WebView

文章插图
 
看不懂？没关系，我们实操一下，修改上面在 extension.js 里的配置如下：
const webviewCommand = vscode.commands.registerCommand('webview.start', () => {const panel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.Two, // 从 One 改成 Two{});});


推荐阅读


上一篇：windows服务器安全配置篇

下一篇：npm安装cnpm后使用报错解决