一个开源的 VS Code 大模型聊天插件：Light-at

这篇文章是一个开发杂谈。对于有经验的开发者来说，可能这个项目并不算特别复杂或者高技术，只是对我个人来说算一个里程碑，因此写篇杂谈文章记录一下。也许也能给起步者一些参考。

项目地址：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。数学渲染使用了开源的库，为了同时能正确渲染 markdown（marked库）、代码（highlight.js库）和数学公式（katex库）调了好久。

模型支持本地 Ollama 模型和云端的支持 OpenAI 接口的模型，直接配置好需要的模型调接口就行了。自己电脑有条件的可以搞几个 Ollama 本地模型玩玩，离线模型回答会更自由一些。云端模型主要测试了通义千问 API、DeepSeek API 和 OpenAI API，均可以正常使用。

另一个优点是可以配置 System Prompt（系统提示词），这样可以基于一个模型衍生出多个满足特定需求的分支，用于完成不同的任务。

然后是支持选择打开过的文本文件作为聊天上下文。主流的智能助手在这方面往往有更强大的支持，比如包含文件夹、代码块检索等。不过对于单纯聊天来说，现在的上下文选择功能也基本上够了。现在我的技术积累还不足，后面再考虑提升吧。

还有一些其他基本功能，比如支持多语言（中文、英语、日语）、聊天记录保存、删除聊天条目、回答内容快速复制、对模型推理内容的单独展示等。更多内容可以参考Light-at用户手册。

开发过程

功能介绍得差不多了，再讲讲开发过程吧。这个插件可以分为前端和插件端。

前端开发

前端主要显示用户界面，获取用户输入并展示反馈内容。前端刚开始我是用原生（html+css+js）写的，随着项目内容逐渐增加，前端维护越来越越痛苦，各种全局变量和 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 国际化。内容不多但搞了三个方案才全部支持多语言。最近在学日语，就把日语支持也做进去了，内容基本上是大模型翻译的，我就主要能看懂片假名，语法是否正确就不知道了。