三：新建一个Vue3项目，在侧边栏中展示，实现vscode插件<=>vue项目双向消息传递
1.新建vue3+vite+ts项目
2.将web页面展示在vscode侧边栏
（1）插件项目修改，把视图注册到侧边栏，完成消息传递
（2）web项目修改，增加事件监听
四：接入大模型对话能力，实现ChatUI
1.大模型接入准备
2.nodejs调用api
3.前端接口调试
五：注册开发者账号并发布插件
1.推荐教程
2.增加插件商店图标
3.前端资源的缓存策略会影响插件web页面的实时更新
六：实战能力探讨（会持续更新，欢迎探讨）
1.行内提示功能的设计与实现（InlineCompletionItemProvider[9]）
2.SSH远程打开文件能力（使用remote-ssh插件提供的命令）
3.Json文件可视化编辑（JsonToHtml）
随着大模型能力越来越卷，在垂直领域的落地也在加快，对于大模型代码生成能力而言，最简洁高效的方式就是集成为常用IDE的插件，在vscode的插件战场中，比较知名的就有GitHubCopilot,智谱清言的codegeex,讯飞星火的iFlyCode。
那么我们就以开发一个简易的大模型对话插件，来探究一下vscode插件开发到发布的流程，研究一下文心一言大模型api的接入
跟着操作大约30-60分钟，你需要
万字长文Action!
如果你的插件只提供原生vscode能力，没有复杂的UI需求，只需要在vscode插件项目上开发即可，类似插件比如VolarGitHistoryEslint如果提供复杂UI交互，定制化界面，就需要在vscode插件内嵌iframe页面（用iframe展示线上web地址与使用vscode提供的一套UI组件皆可，详见第三节），我这里选择访问线上地址，因此需要开发一个vscode插件项目与一个vue3项目（其他框架亦可），类似的复杂插件比如CodeGeeXiFlyCode，会将web页面展示在侧边栏中。
image.png
本文主要讲解如何在vscode插件中通过iframe展示web页面，获得更好的拓展性与可维护性
开始你的第一个插件项目[2]
找到一个比较舒服的文件夹，打开cmd，通过以下命令安装vscode项目脚手架，取的是registry.npmjs.org[3]镜像源，因此可能会有科学问题
npminstall-gyogenerator-code
安装完成后，直接用命令创建新的插件项目
yocode
进入配置页面，默认就选择NewExtension(TypeScript),后面的按照图中来就可然后会自动创建好项目，并执行npmi，然后用vscode打开项目
目录结构就很清晰了，我们主要涉及修改extension.ts以及package.json文件上图中，extension.ts中activate()方法就是插件的入口函数,每次插件启动都会执行此函数，当前代码是注册了一个helloworld命令，当你在vscode中通过ctrl+shift+p调出输入框并输入helloworld，就会执行此注册命令的回调，弹出一个message框，下面我们来试一下
当前vscode版本不能低于package.json中的最低版本要求！
这样写表示最低支持到1.83.0版本！改一下重新reload一下宿主插件，再试试命令就可以弹出啦！到此我们的插件侧项目就搭建好了，下面我们简单建一个vue项目，嵌入到侧边栏中
找一个舒服的文件夹，打开cmd
npminitvite
第一步当然是先建一个iframe把我们的web项目的地址填进去呗，开始。
vscode提供了两种创建iframe的方法，WebviewViewProvider和createWebviewPanel，选其一即可，这里我们介绍一下WebviewViewProvider如何使用
首先在extension.ts同级目录下新建chatWebview.ts
WebviewViewProvider是一个接口，因此建一个自己的类实现它的方法即可下面我们创建一个实现WebviewViewProvider接口的类：ChatWebviewchatWebview.ts文件:(可直接运行)具体代码作用看注释
import{window,Position,WebviewView,WebviewViewProvider}from"vscode";
exportclassChatWebviewimplementsWebviewViewProvider{
//写一个public变量，方便对象引用创建后的webview实例，但是可能存在还未完全解析完成时，访问值为null
//看了vscodeapi发现，resolveWebView返回一个Thenable，可以在解析完成后拿到webview实例
//但是这个函数是在webview容器第一次显示时自动执行，不需要手动调用，不知道怎么拿到Thenable
publicwebview:WebviewView|null=null;
resolveWebviewView(webviewView:WebviewView):void|Thenable{
this.webview=webviewView;
webviewView.webview.options={
enableScripts:true,
};
//监听web端传来的消息
webviewView.webview.onDidReceiveMessage((message)=>{
switch(message.command){
case"WebSendMesToVscode":
//实现一个简单的功能，将web端传递过来的消息插入到当前活动编辑器中
leteditor=window.activeTextEditor;
editor.edit((edit)=>{
letposition=editor.selection
editor.selection.start
:newPosition(0,0);
edit.insert(position,message.data);
});
return;
}
},undefined);
//webview展示的内容本身就是嵌套在一个iframe中，因此在此html中再嵌套一个iframe时，需要传递两次postMessage