优衣库网站建设,重庆百姓网,中秋网页设计素材网站,汕尾英文网站建设这篇文章是一个开发杂谈。对于有经验的开发者来说#xff0c;可能这个项目并不算特别复杂或者高技术#xff0c;只是对我个人来说算一个里程碑#xff0c;因此写篇杂谈文章记录一下。也许也能给起步者一些参考。 项目地址#xff1a;https://github.com/HiMeditator/light-… 这篇文章是一个开发杂谈。对于有经验的开发者来说可能这个项目并不算特别复杂或者高技术只是对我个人来说算一个里程碑因此写篇杂谈文章记录一下。也许也能给起步者一些参考。 项目地址https://github.com/HiMeditator/light-at 插件下载Light At - Visual Studio Marketplace 背景
最近组里在做相关项目学了些 VS Code 插件开发就想着自己做一个插件。花了一个月终于做出一款个人还算满意的插件这也是第一次一个人做原创项目下面介绍一下。
自从大模型出现后开发就越来越依赖大模型了。再后来以 Copilot 为首的 IDE 内智能代码助手更是让 IDE 内开发更加方便。这些智能代码插件重点关注代码功能比如代码补全、代码生成、错误修复。对于 IDE 内聊天也侧重于代码相关的内容。作为 VS Code 重度用户有时候觉得这些智能代码助手在通用聊天上有些不足于是我准备自己做一个大模型聊天插件着重关注聊天功能还没做代码功能主要是技术难度要高得多。 如图流行的智能助手基本不渲染数学公式 目前主流的智能助手插件不代表全部在聊天上可能的缺点有
不渲染数学公式这个没太大技术壁垒可能是觉得没必要模型选择有限一般只支持自家模型和开源模型自己不做模型的Continue不在其中缺少多模态交互这个我也没做现在有多模态大模型API技术上可行
插件介绍
Light-at轻亮插件主要是为了解决问题1和问题2。数学渲染使用了开源的库为了同时能正确渲染 markdownmarked库、代码highlight.js库和数学公式katex库调了好久。 公式渲染和代码高亮 模型支持本地 Ollama 模型和云端的支持 OpenAI 接口的模型直接配置好需要的模型调接口就行了。自己电脑有条件的可以搞几个 Ollama 本地模型玩玩离线模型回答会更自由一些。云端模型主要测试了通义千问 API、DeepSeek API 和 OpenAI API均可以正常使用。 我目前的模型列表 另一个优点是可以配置 System Prompt系统提示词这样可以基于一个模型衍生出多个满足特定需求的分支用于完成不同的任务。 添加系统提示词apiKey 可以使用环境变量 然后是支持选择打开过的文本文件作为聊天上下文。主流的智能助手在这方面往往有更强大的支持比如包含文件夹、代码块检索等。不过对于单纯聊天来说现在的上下文选择功能也基本上够了。现在我的技术积累还不足后面再考虑提升吧。 聊天上下文选择 还有一些其他基本功能比如支持多语言中文、英语、日语、聊天记录保存、删除聊天条目、回答内容快速复制、对模型推理内容的单独展示等。更多内容可以参考Light-at用户手册。 聊天记录管理右边是插件设置 开发过程
功能介绍得差不多了再讲讲开发过程吧。这个插件可以分为前端和插件端。
前端开发
前端主要显示用户界面获取用户输入并展示反馈内容。前端刚开始我是用原生htmlcssjs写的随着项目内容逐渐增加前端维护越来越越痛苦各种全局变量和 DOM 操作乱飞。因此我决定重构前端。
本科学了 Vue2因此决定使用 Vue 开发前端。学了整整三天 Vue3然后开始重写项目。我放弃了之前写的Light-assistant项目重开了一个仓库取名为Light-at。
VS Code 插件中前端界面比较特殊是通过 Webview 展示的有很多限制比如只能加载 VS Code 处理过的本地资源页面跳转难以实现等。
我在网上查了一天资料各种试错才终于搞定了在 VS Code 插件中嵌入 Vue 前端页面的问题。我现在插件的架构基本上是按照_code_bear的帖子构建的采用 monorepo 的开发范式使用 pnpm 在同一个仓库中同时管理前端子项目和插件子项目。
但是根据教程也是遇到了一些问题比如某些实现有些复杂、插件打包会报错。经过多次修改总结了自己的开发流程这是对我这个插件开发入门者一个比较宝贵的经验。以后有时间专门开一个帖细说用 Vue3 开发 VS Code 插件的前端页面。
本次开发没有使用前端组件库大部分样式都是手搓的因为有点强迫症经常一个样式调好久。
插件端开发
插件端开发要简单一些不了解的内容就问大模型或者查 VS Code 插件文档功能实现注意模块化尽量降低耦合不然后面开发容易出现牵一发动全身的问题。
为了做国际化多语言支持还是花了一些功夫插件端配置文件需要 package.nls.*.json 国际化、插件内的内容需要 l10n 国际化前端界面使用 i18n 国际化。内容不多但搞了三个方案才全部支持多语言。最近在学日语就把日语支持也做进去了内容基本上是大模型翻译的我就主要能看懂片假名语法是否正确就不知道了。
总结
总的来说算是一次不错的开发经历自己做出来的东西也自己用着也挺舒服的后面如果有新的需求还能继续改进。
项目目前代码量并不高并不算复杂欢迎感兴趣的同学参考Github - Light At。
最后贴一张项目结构图 标看上去很长但是代码量不多
