【VS Code插件开发】Webview面板（三）

本文作者为 360 奇舞团前端开发工程师介绍VSCode 是一个非常强大的代码编辑器，而它的插件也非常丰富。在开发中，我们经常需要自己编写一些插件来提高开发效率。本文将介绍如何开发一个 VSCode 插件，并在其中使用 Webview 技术。首先介绍一下什么是Webview。什么是 Webview？Webview 是一种可以在 VS Code 中嵌入 Web 内容的技术。通过 Webview，开发...

vsCode插件开发记录，本文主要记录了webView的开发内容

yo。

代码入口文件，该文件有两个函数 activate 和deactivate，前者函数在插件安装时被调用，后者在插件卸载时被调用。

vscode的webview插件的自由度很高，可以满足开发者的各种定制化的要求。本篇介绍一个基于vue3的vscode webview插件模板。

可以直接在vscode插件代码中引入本地html文件 function getViewContent(context, templatePath) { const resourcePath = path.join(context.extensionPath, templatePath); const dirPath = path.dirname(resourcePath); let html = fs.readFileSync(resourcePath, 'utf-8'); // vsc.

通俗点说：webview即web视图，使用webview api 你可以在vscode中打开一个完成的视图，该视图就跟嵌入页面一样，几乎用html语法就可以渲染；而且还可以调用一些vscode的原生api做一些复杂的交互； 我也是半知半解，让我们先实现一个效果；就可以自己去总结这是个什么东西了 1 在extension.ts文件中，添加一个命令 context.subscriptions.push( vscode.commands.registerCommand('GeoJsonVi.

在 VS Code 开发工具中，可以在侧边栏中创建一个持久化的自定义视图。这个视图可以随着 VS Code 的不同窗口、标签页之间的切换而保持存在。侧边栏官方文档讲解用于定义自定义视图容器。位于编辑器侧边的垂直工具栏。活动栏提供了快速访问各种功能、面板和操作的图标按钮，使用户能够轻松地切换和执行不同的任务。

本文介绍了在 VS Code 插件开发过程中常见的命令，比如：代码复制、粘贴、剪切，文件删除、新增等等，后续会继续补充。

vscode panel 插件开发 先放上VS code的布局图 增加contributes 添加新的布局组件需要放入package.json的contributes下 reference文档里提及可以在activity bar和panel里增加新的组件。

在开发 VSCode 插件时，调试 Webview 内容通常需要使用 VSCode 自带的开发者工具，而不是浏览器的开发者工具。

Vscode 插件开发

3、具备以上两点后，在创建发布者页面填写组织名称和ID（组织名称和ID要与前面 遇到警告2 里面解决方案填写的组织者名称一致）即可创建发布者；更新 package.json 配置，publisher 的值替换为你的名字或组织名称（跟上面一至）创建一个 snippets 目录 和 两个文件 js.json 、vue3.json。在调试新窗口，添加一个 test.js 文件和 test.vue 文件。创建一个许可证文件 LICENSE.md ，输入以下内容（参考），将。package.json 主要配置文件。

Vscode插件开发脚手架的使用安装脚手架生成代码运行项目结构及部分重要代码添加右键菜单和快捷键package.jsonactivationEventscontributes链接与资源 脚手架的使用 安装脚手架 npm install -g yo generator-code 生成代码 cd myvscodetest yo code 将询问一下问题，以获得所需不同选项输入。 ?(1) What type of extension do you want to create? (Use arrow keys

上面提到了生成一个command只需要 2 步，先是利用vscode.commands.registerCommand注册一个，然后再到package.json里的contributes.commands中配置即可。是新手引导，里面包含了对文件的作用解析、如何运行插件、测试插等等，推荐去看一看，我们在下面也会介绍一些。保存文件到指定位置使用showSaveDialog，它会打开文件选择器弹窗，选择了保存路径后点击确定会返回选中的路径，如果点击取消会返回undefined。这里只列举一些常见的api.