淘宝请人做网站被骗,泰安房产成交信息网,无锡网站怎么优化排名,网站模板用什么软件做目录
一#xff1a;首先明确插件开发方式
二#xff1a;新建一个Vscode 插件项目
1. 官网教程地址
2. 一步一步来创建
3. 分析目录结构以及运行插件
三#xff1a;新建一个Vue3 项目#xff0c;在侧边栏中展示#xff0c;实现vscode插件 vue项目 双向消息传…目录
一首先明确插件开发方式
二新建一个Vscode 插件项目
1. 官网教程地址
2. 一步一步来创建
3. 分析目录结构以及运行插件
三新建一个Vue3 项目在侧边栏中展示实现vscode插件 vue项目 双向消息传递
1. 新建vue3vitets项目
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的插件战场中比较知名的就有 GitHub Copilot, 智谱清言的codegeex, 讯飞星火的iFlyCode。
那么我们就以开发一个简易的大模型对话插件来探究一下vscode插件开发到发布的流程研究一下文心一言大模型api的接入
跟着操作大约30-60分钟你需要 安装vscodenpm/yarn等node版本 12.0 最好有时间提前看一看 vscode 官网api开发文档[1]
万字长文 Action!
一首先明确插件开发方式 如果你的插件只提供原生vscode能力没有复杂的UI需求只需要在vscode插件项目上开发即可类似插件比如Volar Git History Eslint 如果提供复杂UI交互定制化界面就需要在vscode插件内嵌iframe页面用iframe展示线上web地址与使用vscode提供的一套UI组件皆可详见第三节我这里选择访问线上地址因此需要开发一个vscode插件项目与一个vue3项目其他框架亦可类似的复杂插件比如 CodeGeeX iFlyCode会将web页面展示在侧边栏中。 image.png
本文主要讲解 如何在vscode插件中通过iframe展示web页面获得更好的拓展性与可维护性
二新建一个Vscode 插件项目
1. 官网教程地址
开始你的第一个插件项目[2]
2. 一步一步来创建 找到一个比较舒服的文件夹打开cmd通过以下命令安装 vscode项目脚手架取的是 registry.npmjs.org[3] 镜像源因此可能会有科学问题 npm install -g yo generator-code安装完成后直接用命令创建新的插件项目 yo code进入配置页面默认就选择 NewExtension(TypeScript),后面的按照图中来就可 然后会自动创建好项目并执行npm i然后用 vscode 打开项目
3. 分析目录结构以及运行插件 目录结构就很清晰了我们主要涉及修改 extension.ts 以及 package.json文件 上图中extension.ts 中 activate() 方法就是插件的入口函数,每次插件启动都会执行此函数当前代码是注册了一个hello world命令当你在vscode中通过 ctrlshiftp 调出输入框并输入hello world就会执行此注册命令的回调弹出一个message框下面我们来试一下
在当前项目中直接按F5会启动一个扩展开发宿主你的插件就运行在这个vscode窗口上啦 下面我们调出命令输入框ctrlshiftp 输入 hello world, 会提示命令选中执行右下角会发现弹了一个message 什么你的没弹出那你岂不是和我当时一样倒霉但你不需要花时间去挖这个奇怪的~bug 首先看一下你的vscode版本 image.png
当前vscode版本不能低于 package.json 中的最低版本要求 这样写表示最低支持到1.83.0版本改一下重新reload一下宿主插件再试试命令就可以弹出啦到此我们的插件侧项目就搭建好了下面我们简单建一个vue项目嵌入到侧边栏中
三新建一个Vue3 项目在侧边栏中展示实现vscode插件 vue项目 双向消息传递
文章开头我们提到插件内展示丰富的UI既可以用iframe展示线上web网页也可以在插件内部用vsode ui实现。下面我主要演示用iframe的方式另一种嵌入方式推荐大家去看一下 CodeGeeX 插件[4]源码如何做的引入了一套vscode风格的UI组件vscode/webview-ui-toolkit源码里面的webviewUI文件夹与translationWebviewProvider.ts文件都是相关代码。
1. 新建vue3vitets项目
找一个舒服的文件夹打开cmd npm init vite执行后按需选择自己的框架与开发环境然后run dev一下子拿到地址, 比如 http://localhost:5173/
2. 将web页面展示在vscode侧边栏
1 插件项目修改把视图注册到侧边栏完成消息传递
第一步当然是先建一个iframe把我们的web项目的地址填进去呗开始。
vscode 提供了两种创建iframe的方法WebviewViewProvider 和 createWebviewPanel选其一即可这里我们介绍一下WebviewViewProvider如何使用
首先在extension.ts 同级目录下新建 chatWebview.ts WebviewViewProvider 是一个接口因此建一个自己的类实现它的方法即可 下面我们创建一个实现WebviewViewProvider接口的类ChatWebview chatWebview.ts 文件: (可直接运行) 具体代码作用看注释
import { window, Position, WebviewView, WebviewViewProvider } from vscode;
export class ChatWebview implements WebviewViewProvider {// 写一个public变量方便对象引用创建后的webview实例但是可能存在还未完全解析完成时访问值为null// 看了vscode api发现resolveWebView 返回一个 Thenable可以在解析完成后拿到webview实例// 但是这个函数是在webview容器第一次显示时自动执行不需要手动调用不知道怎么拿到Thenablepublic webview: WebviewView | null null;resolveWebviewView(webviewView: WebviewView): void | Thenablevoid {this.webview webviewView;webviewView.webview.options {enableScripts: true,};// 监听web端传来的消息webviewView.webview.onDidReceiveMessage((message) {switch (message.command) {case WebSendMesToVscode:// 实现一个简单的功能将web端传递过来的消息插入到当前活动编辑器中let editor window.activeTextEditor;editor?.edit((edit) {let position editor?.selection? editor?.selection.start: new Position(0, 0);edit.insert(position, message.data);});return;}}, undefined);// webview 展示的内容本身就是嵌套在一个iframe中因此在此html中再嵌套一个iframe时需要传递两次postMessagewebviewView.webview.html !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0stylehtml,body {margin: 0;padding: 0;width: 100%;height: 100%;background-color:#000000;overflow:hidden;}.webView_iframe {width: 100%;height: 100%;border: none;}.outer{width: 100%;height: 100%;overflow: hidden;}/style/headbodyscriptconsole.log(Hello from the webview!);// 向vscode 传递消息的固定写法, vscode 为我们封装好了postMessageconst vscode acquireVsCodeApi();// 接收来自web页面的消息window.addEventListener(message, event {const message event.data;switch (message.command) {// 插件传递消息给web端case vscodeSendMesToWeb:let iframe document.getElementById(WebviewIframe)WebviewIframe.contentWindow.postMessage(message, *)console.log(fromWebViewIframe: message.data)break;// web端发送消息给插件case WebSendMesToVscode:vscode.postMessage(message);break;}});/scriptdiv classouteriframe idWebviewIframe classwebView_iframe sandboxallow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads allowcross-origin-isolated; clipboard-read; clipboard-write; srchttp://localhost:5173//iframe/div/body/html;}
}
提供webview视图的类创建好了然后我们需要在入口函数中实例化一个webview然后把这个视图注册到vscode侧边栏中
打开extension.ts文件修改如下 代码可直接运行
// The module vscode contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from vscode;
import { ChatWebview } from ./chatWebview;
// This method is called when your extension is activated
// vscode 插件入口函数当插件第一次加载时会执行activate
export function activate(context: vscode.ExtensionContext) {console.log(Congratulations, your extension Chat is now active!);// 实现侧边栏的初始化// 实例化一个chatWebviewconst chatWebview new ChatWebview();// 注册webview 到id为 Chat-sidebar 的views中这个id为 Chat-sidebar 的视图我们稍后会在// package.json 中声明先理解为我们要把iframe渲染在那个地方侧边栏还是标签页需要在// packagea.json 中控制context.subscriptions.push(vscode.window.registerWebviewViewProvider(Chat-sidebar, chatWebview, {webviewOptions: {// 这是一个比较有用的配置项可以确保你的插件在不可见时不会被销毁建议开启否侧每次打开都会重新加载一次插件retainContextWhenHidden: true,},}));// 这里实现了一个简单的功能在vscode打开的文件中选中代码时会实时展示在web页面上// 监听用户选中文本事件vscode.window.onDidChangeTextEditorSelection((event) {const editor event.textEditor;let document editor.document;let selection editor.selection;// 获取当前窗口的文本let text document.getText(selection);// 上文提到chatWebview可能为null 因此需要可选链写法所以这里存在不稳定性不过测试没问题~chatWebview?.webview?.webview.postMessage({// 第一次postMessage下一次在chatWebview文件的iframe中 command: vscodeSendMesToWeb,data: text,});});
}// This method is called when your extension is deactivated
export function deactivate() {}
至此我们实例化了ChatWebview并将其与视图Chat-siderbar绑定
下面我们需要在package.json中将视图注册到侧边栏中并指定名字图标等 打开package.json 文件修改如下 将原本的 contributes 字段替换一下
确保activitybar 中的id在views中有对应的视图我们这里id是Chat-sidebar-view在views就要有对应名字的视图 并且该视图 Chat-sidebar-view 的id为我们 ChatWebview 绑定的视图id
contributes: {commands: [],viewsContainers: {activitybar: [{id: Chat-sidebar-view,title: Chat,icon: images/vite.svg}]},views: {Chat-sidebar-view: [{type: webview,id: Chat-sidebar,name: Chat,icon: images/vite.svg,contextualTitle: Chat}]}},至此我们的视图和双向通讯在插件侧已经完成了我们试一下直接F5运行打开拓展开发宿主 image.png
点击左侧栏图标会看见我们deweb页面加载出来啦 再试一下选中文本的事件和postMessage通讯,点击上方help选择倒数第三个Toggle developer tools或者按ctrlshifti 可以打开谷歌开发者工具调试vscode
随便打开一个项目文件在窗口中选中文本会发现控制台一直在输出 fromWebViewIframe: ...... ,我们第一步通讯通了下面在vue项目中加一下消息接收和发送。
2 web项目修改增加事件监听
打开index.html增加message的监听收到消息时插入到container中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue TS/title/headbodydiv idapp/divscript typemodule src/src/main.ts/scriptscript typemodulewindow.addEventListener(message, (event) {const message event.data;switch (message.command) {case vscodeSendMesToWeb:const div document.getElementById(container);div.innerHTML message.data;break;}});/script/body
/html我们试一下在拓展开发宿主中选中文本会实时展示在页面上 image.png
下面我们发送消息试一下 简单修改一下 HellowWord.vue 组件增加一个sendMessage 方法
script setup langts
import { ref } from vue;defineProps{ msg: string }();const count ref(0);const sendMessage () {window.parent.postMessage({command: WebSendMesToVscode,data: this message is from vue3,},*);
};
/scripttemplateh1{{ msg }}/h1div classcardbutton typebutton clicksendMessageclick/buttonpEditcodecomponents/HelloWorld.vue/code to test HMR/p/divpCheck outa hrefhttps://vuejs.org/guide/quick-start.html#local target_blankcreate-vue/a, the official Vue Vite starter/ppInstalla hrefhttps://github.com/vuejs/language-tools target_blankVolar/ain your IDE for a better DX/pp classread-the-docsClick on the Vite and Vue logos to learn more/p
/templatestyle scoped
.read-the-docs {color: #888;
}
/style我们点击一下按钮会发现在当前文件光标处插入了一条信息。this message is from vue3!
到此我们的小插件展示出来了也实现了数据互通。下面我们实现一个简单对话UI并接入百度文心一言大模型做一个自己的插件小助手如果他能记住我们之前问过的代码并帮我们举一反三并提醒我们查漏补缺就好了。
四接入大模型对话能力实现ChatUI
1. 大模型接入准备 我分别注册了智谱清言chatGLM与文心一言ERNIE-Bot,发现两者都有基础的免费额度前者相对于后者代码能力貌似更强一些我们这里做一个简单类似于代码错题本的对话助手就接入文心一言吧 首先我们要去官网[5],注册一下开发者账号并且实名认证 整个过程很简单然后我们看一下api 文档[6] 下面我把主要步骤说一下 首先我们要创建一个自己的应用获取到Secret Key和API Key
进入下面页面点击创建应用输入应用名称和应用描述直接确定即可然后会有一个应用生成里面就有我们的Secret Key和API Key 我们要拿这两个key去获取 access_token 和 refresh_token, 用于JWT鉴权有两种方式其一我们可以在网页中访问一下拿到一次性30天的access_token用于临时测试其二最好在项目http请求前自动用refresh_token去获取access_token
下面我们访问一下这个地址,当然你要把双key换成你自己的应用的~https://aip.baidubce.com/oauth/2.0/token?grant_typeclient_credentialsclient_id你的keyclient_secret你的key
直接用浏览器访问一下呢然后就在请求里拿到了access_token (不能有小可爱找不到吧~ 拿到token了我们来这里测试一下 测试地址[7] 填入标出的这两项第二项示例如下
[{role: user,content: 介绍一下自己},
]可以看到接口调用结果 image.png
2. nodejs调用api
首先找一个舒服的文件夹新建一个node项目我们这里选用express框架可以参考我这里的命令行 image.png
npm init 后会生成一个package.json然后我们安装一下常用包npm install express sequelize mysql2 axios body-parser cors --save 之后就可以在vscode中打开我们的项目了我们先新建一个server.js,作为我们的入口文件再建一个chat.js 作为我们的大模型调用文件
两个文件代码如下具体解析见注释可以直接复制过去然后在控制台执行node server.js 直接启动服务~
//server.js
const Conversation require(./chat.js);
const express require(express);
const bodyParser require(body-parser);
const cors require(cors);const app express();
// 暂时允许所有跨域请求
let corsOptions {origin: *,
};
app.use(cors(corsOptions));
// content-typeapplication/json
app.use(bodyParser.json());
// content-typeapplication/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// 对话类
const conversation new Conversation();
// 定义/chat路由处理POST请求
app.post(/chat, async (req, res) {const { messages } req.body || {};if (typeof messages ! string) {return res.status(400).send({ error: Invalid messages type });}try {// 调用ask方法获取大模型结果const response await conversation.ask(messages);return res.status(200).send({ message: response });} catch (error) {return res.status(500).send({ error: error.messages });}
});
// 设置监听端口
const PORT process.env.PORT || 8080;
app.listen(PORT, () {console.log(服务器运行端口 ${PORT}.);
});
chat.js
// 访问模型服务
const axios require(axios);
// 这里就是你的accessToken我改了两个数所以你得替换成自己的喽~
const accessToken 24.88635a1444105db00bb6684c0598a9a3.2542000.1741590285.281335-42231960;
const ERNIEB4 https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro;
const ERNIEB https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions;class Conversation {constructor() {// 上下文数据存在这里文心的调用是需要把所有的历史对话数据全部传过去所以上下文窗口大小得注意this.messages [];}async ask(prompt) {// 问句push进去this.messages.push({ role: user, content: prompt });console.log(message this.messages[0]);try {const res await axios.post(ERNIEB,{ messages: this.messages },{ params: { access_token: accessToken } });const { data } res;console.log(data);// 答案也放进去this.messages.push({ role: assistant, content: data.result });return data.result;} catch (error) {console.log(调用模型失败 error);}}
}
// 导出函数
module.exports Conversation;所以我们的服务起了吗网页试一下8080呗通了就可以 image.png
下面我们在前端代码中加一下接口调用就大功告成啦
想必看到这里你也累了我们去调戏一下 Sydney image.png
看来一时半会我们还是不可替代的 o_O
3. 前端接口调试
言归正传我们来增加接口调用吧顺便画一个看得过去的UI界面
先装一下 npm install ant-design/icons-vue 然后把App.vue删一下
// app.vue
script setup langts
import ChatUI from ./components/chatUI.vue;
/scripttemplatediv classcontainerChatUI //div
/templatestyle scoped
.container {width: 100%;height: 100%;
}
/style
无需多言**chatUI.vue代码**奉上(主要界面gpt画的我加了接口调用)\
// chatUI.vue
templatediv classchat-containerdiv classmessagesdivv-for(item, index) in chatList:keyindex:class[message, item.type]div classbubble{{ item.content }}/divdiv classavatarcomponent:isitem.type question ? UserOutlined : RobotOutlined//div/div/divdiv classinput-areaa-inputv-model:valueinputValueplaceholderType a message...pressEnterhandleSend/a-button typeprimary clickhandleSendsend/a-button/div/div
/templatescript setup langts
import axios from axios;
import { ref } from vue;
import { UserOutlined, RobotOutlined } from ant-design/icons-vue;
const inputValue ref();
let chatList refany[]([]);const handleSend () {const question inputValue.value.trim();if (question) {getAnswer(question);chatList.value.push({ type: question, content: question });inputValue.value ; // 清空输入框}
};
function getAnswer(question: string) {const URL http://localhost:8080/chat;const payload {messages: question,};sendPost(URL,payload,{},(res: any) {console.log(res.data.message);chatList.value.push({ type: answer, content: res.data.message });},(err: any) {console.log(err);});
}//post方法
function sendPost(url: string,data: any,headers {},funcSuccess: any,funcError: any
) {const headerTem {content-Type: application/json;charsetUTF-8,};if (JSON.stringify(headers) ! {}) {Object.assign(headerTem, headers);}axios.post(url, data, {headers: headerTem,}).then(function (res) {console.log(sendPost res info :, res);funcSuccess(res);}).catch((err) {console.log(sendPost err info : err);if (funcError) {funcError(err);}});
}
/scriptstyle scoped
.chat-container {min-width: 300px;height: 100%;display: flex;flex-direction: column;/* background-color: #1e1e1e; */border: 1px solid #999;border-radius: 8px;
}.messages {height: 650px;overflow-y: auto;padding: 10px;display: flex;flex-direction: column;gap: 10px;
}
.bubble {color: #333;text-align: right;margin-right: 8px;
}
.input-area {display: flex;
}
.message {display: flex;align-items: center;
}.question {justify-content: flex-end;
}.answer {justify-content: flex-start;
}
/style
这个就是简单的调用接口我就不注释了我们试一下接口 我们在vscode中看一下当前效果 image.png
还可以吧也不能要求AI太高哈哈我们问几个问题试试 image.png
啊文心一言还挺强紧跟时事哦
所以你的接口通了吗通了的话点个赞吧好人一生平安~ 没通的话原因有点多代码是没问题的其他的可以评论区讨论下 至此我们的聊天小插件算是开发完成了我们学习了如何创建一个vscode插件随后搭建了一个vue3项目展示在了侧边栏里然后我们用nodejs接入了文心一言api前端调用接口简单实现了对话功能希望你看完这篇文章有所收获有所感想 五注册开发者账号并发布插件
1. 推荐教程
插件开发手册[8]
根据教程注册账号拿到自己的Token通过vsce publish 1.0.x 来更新版本
2. 增加插件商店图标
插件商店的图标是通过读取package.json中的icon来展示的,该字段与publisher同级
icon: images/icon.png,
3. 前端资源的缓存策略会影响插件web页面的实时更新
因为插件实时访问的前端服务当我们更新前端资源时当然希望插件能同步更新此时要注意前端资源的缓存策略最好是配置为 cache-control:no-store no-cache
六实战能力探讨会持续更新欢迎探讨
1. 行内提示功能的设计与实现InlineCompletionItemProvider[9]
先说一个思路就是用InlineCompletionItemProvider实现行内提示
2. SSH 远程打开文件能力使用 remote-ssh 插件提供的命令
先说一个思路就是通过在控制台执行 remote-ssh 的命令 code --reuse-window vscode-remote://ssh-remote${hostname}${path} 来实现打开远程ssh地址的文件需要安装remote-ssh插件
3. Json 文件可视化编辑JsonToHtml
先说一个思路就是监听用户打开文件夹时的事件然后再窗口中打开一个新的webview试用了一些jsonToHtml的包不如自己手动格式化将bool格式化为checkbox等.
