這篇文章是一個開發雜談。對于有經驗的開發者來說，可能這個項目并不算特別復雜或者高技術，只是對我個人來說算一個里程碑，因此寫篇雜談文章記錄一下。也許也能給起步者一些參考。

---

項目地址：https://github.com/HiMeditator/light-at

插件下載：Light At - Visual Studio Marketplace

背景

最近組里在做相關項目，學了些 VS Code 插件開發，就想著自己做一個插件。花了一個月，終于做出一款個人還算滿意的插件，這也是第一次一個人做原創項目，下面介紹一下。

自從大模型出現后，開發就越來越依賴大模型了。再后來以 Copilot 為首的 IDE 內智能代碼助手更是讓 IDE 內開發更加方便。這些智能代碼插件重點關注代碼功能，比如代碼補全、代碼生成、錯誤修復。對于 IDE 內聊天也側重于代碼相關的內容。作為 VS Code 重度用戶，有時候覺得這些智能代碼助手在通用聊天上有些不足，于是我準備自己做一個大模型聊天插件，著重關注聊天功能（還沒做代碼功，能主要是技術難度要高得多）。

目前主流的智能助手插件（不代表全部）在聊天上可能的缺點有：

1. 不渲染數學公式（這個沒太大技術壁壘，可能是覺得沒必要）
2. 模型選擇有限，一般只支持自家模型和開源模型（自己不做模型的Continue不在其中）
3. 缺少多模態交互（這個我也沒做😂，現在有多模態大模型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 國際化。內容不多但搞了三個方案才全部支持多語言。最近在學日語，就把日語支持也做進去了，內容基本上是大模型翻譯的，我就主要能看懂片假名，語法是否正確就不知道了。

總結

總的來說算是一次不錯的開發經歷，自己做出來的東西也自己用著也挺舒服的，后面如果有新的需求還能繼續改進。

項目目前代碼量并不高，并不算復雜，歡迎感興趣的同學參考：Github - Light At。

最后貼一張項目結構圖：