使用 VS Code 和 Ollama 自動進行程式碼註釋

作者：卡洛斯·穆庫霍✏️

程式碼註解在軟體開發中扮演至關重要的角色。他們：

• * 解釋複雜的邏輯
  • 記錄決策過程
  • 為未來的開發者提供背景

雖然有些人認為編寫良好的程式碼應該是不言自明的，但其他人則強調註釋在捕獲某些實現背後的推理方面的重要性。自動產生評論的想法引發了關於人工智慧是否能夠真正捕捉人類洞察力從而使評論變得有價值的討論。

像 GitHub Copilot 這樣的人工智慧編碼助手持續受到歡迎，但社群正在努力解決有關資料隱私的問題以及依賴專有平台的風險。儘管有這些擔憂，Ollama 等工具提供了一種從人工智慧功能中受益的方法，同時解決了對資料隱私和平台鎖定的擔憂。

Ollama 本身並不是一個編碼助手，而是一個工具，允許開發人員運行大型語言模型 (LLM) 以提高生產力，而無需共享資料或支付昂貴的訂閱費用。

在本教學中，您將學習如何建立使用 Ollama 自動產生註解的 VS Code 擴充功能。該計畫將示範如何使用法學碩士模型來提高生產力，而無需共享數據或支付昂貴的訂閱費用。

在本教學結束時，您將擁有一個類似以下內容的擴充功能：

要跟隨，您將需要：

• 安裝了 Node.js 和 npm
• 能夠使用 Ollama 來運作 LLM 的機器

設定奧拉瑪

要設定 Ollama，請先從 Ollama 的官方網站下載適合您作業系統的安裝程式：

• 若要在 Windows 上安裝 Ollama，請下載執行檔並執行它。 Ollama 將自動安裝，您就可以使用它
• 對於 Mac，下載 MacOS 版 Ollama 後，解壓縮檔案並將 Ollama.app 資料夾拖曳到您的應用程式資料夾中。一旦您移動應用程序，安裝就會完成

• 對於 Linux 用戶，安裝 Ollama 就像在終端機中執行以下命令一樣簡單：
  

  curl -fsSL https://ollama.com/install.sh | sh
  

拉動和運行模型

Ollama 安裝完成後，您就可以開始與 LLM 互動。在執行任何命令之前，您需要透過開啟應用程式或在終端機中執行以下命令來啟動 Ollama：

curl -fsSL https://ollama.com/install.sh | sh

此命令啟動 Ollama 應用程序，允許您使用可用的命令。它還啟動在連接埠 11434 上運行的 Ollama 伺服器。您可以透過開啟新的瀏覽器視窗並導航至 http://localhost:11434/ 來檢查伺服器是否正在執行。要從 Ollama 註冊表中提取模型而不運行它，請使用ollama 拉命令。例如，要拉取 phi3.5 模型，請執行下列指令：

ollama serve

此指令取得模型並使其可供以後使用。您可以使用以下指令列出所有已拉取的模型：

ollama pull phi3.5

這將顯示模型清單及其大小和修改時間：

ollama list

要立即拉取並執行模型，請使用 ollama run 指令。例如，要執行 phi3.5，請執行：

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

此命令會拉取模型（如果尚未拉取）並開始執行，以便您可以立即開始查詢它。您應該在終端機中看到以下內容：

ollama run phi3.5

在本教程中，您將使用 phi3.5 模型為給定的程式碼區塊產生註解。選擇這種語言模型是因為它在大小和效能之間取得了平衡——雖然它很緊湊，但它提供了強大的結果，使其成為建立概念驗證應用程式的理想選擇。

phi3.5 模型足夠輕量，可以在 RAM 有限且沒有 GPU 的電腦上高效運行。如果您有 GPU，請隨意運行更大的 LLM。向模型發送以下提示：

csfm1993:~$ ollama run phi3.5
>>> Send a message (/? for help)

提示要求 phi3.5 模型解釋給定程式碼區塊中發生的情況。您應該得到類似以下的答案：

complete code:
"
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
"
Given the code block below, write a brief, insightful comment that explains its purpose and functionality within the script. If applicable, mention any inputs expected in the code block. 
Keep the comment concise (maximum 2 lines). Wrap the comment with the appropriate comment syntax (//). Avoid assumptions about the complete code and focus on the provided block. Don't rewrite the code block.
code block:
"
app.get('/', (req, res) => {
  res.send('Hello World!')
})
"

模型傳回帶有指定註釋語法的註釋，後面跟著解釋。與模型互動完成後，發送指令 /bye 結束聊天。

建立和配置項目

在本節中，您將建立一個新的 VS Code 擴充專案並安裝與 Ollama 互動所需的模組。您將使用 Yeoman 和 VS Code Extension Generator 來建立 TypeScript 專案。

在終端機中，執行以下命令來建立新的 VS Code 擴充項目：

// This Express.js route handler responds to GET requests at the root URL 
('/'), sending back a plain text 'Hello World!' message as an HTTP 
response. No additional inputs are required for this specific block of 
code, which serves as a basic setup example within a web server context.

選擇 TypeScript 作為專案使用的語言，然後填入剩餘欄位：

npx --package yo --package generator-code -- yo code

現在，執行以下命令來安裝與 Ollama 伺服器互動所需的模組：

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commentGenerator
? What's the identifier of your extension? commentgenerator
? What's the description of your extension? Leave blank
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

使用上面的命令，您安裝了以下軟體包：

• ollama：提供一組用於與 LLM 互動的工具和實用程式的軟體包。它將用於與 Ollama 伺服器通信，向 LLM 發送提示以產生給定程式碼區塊的程式碼註解
• cross-fetch：一個輕量級包，為 Node.js 帶來了 Fetch API 支援。它允許在 Fetch 本身不可用的環境中取得資源，例如 API 請求。它將用於向 Ollama 伺服器發出 HTTP 請求，並避免當 LLM 花費太長時間產生回應時可能發生的 HTTP 請求逾時錯誤

開啟package.json檔案並確保engines屬性中的vscode版本與系統中安裝的VS Code版本相符：

curl -fsSL https://ollama.com/install.sh | sh

在 package.json 檔案中，請注意擴充的主入口點是一個名為 extension.js 的文件，位於 out 目錄中，即使這是一個 TypeScript 專案。這是因為在執行專案之前，透過執行 npmcompile 指令將 TypeScript 程式碼編譯為 JavaScript：

ollama serve

此外，請注意您的擴充功能應執行的命令是如何在命令屬性中聲明的：

ollama pull phi3.5

目前，只有一個名為 Hello World 且 ID 為 commentgenerator.helloWorld 的指令。這是腳手架項目附帶的預設命令。

接下來，導覽至 src 目錄並開啟 extension.ts 檔案：

ollama list

extension.ts 檔案是 VS Code 擴充的入口點。該檔案中的程式碼首先匯入 vscode 模組並宣告兩個名為 activate 和 deactivate 的函數。

啟動擴充時將呼叫 activate 函數。此函數記錄一條訊息並註冊 Hello World 命令，該命令在 package.json 檔案中定義。每次執行此命令時，都會顯示一個顯示「Hello World」訊息的通知視窗。

deactivate 函數在擴充功能停用時（例如，當 VS Code 關閉時）被呼叫。目前它是空的，因為不需要清理，但它可以用來釋放資源。

在編輯器內，開啟 src/extension.ts 並按 F5 或執行指令「偵錯：從指令面板開始偵錯」(Ctrl Shift P)。這將在新的 Extension Development Host 視窗中編譯並執行擴充。

從新視窗中的指令面板（Ctrl Shift P）執行 Hello World 指令。

在編輯器中，導覽至 src/extension.ts 並按 F5 或使用命令面板中的「偵錯：開始偵錯」選項（Ctrl Shift P）。此操作將編譯擴展並在單獨的擴展開發主機視窗中啟動它。

在這個新視窗中，開啟指令面板（Ctrl Shift P）並執行 Hello World 指令：

要持續監視專案的變更並自動編譯它，請返回終端機並執行以下命令：

curl -fsSL https://ollama.com/install.sh | sh

這將以監視模式啟動 TypeScript 編譯器，確保每當您進行變更時都會重新編譯您的專案。

註冊產生註解指令

在本部分中，您將使用名為「產生評論」的指令來取代預設的 Hello World 指令。當你猜對了——用戶想要產生評論時，將觸發此命令。您將定義命令並確保它在擴充功能中正確註冊。

開啟package.json檔案並取代Hello World指令，如下所示：

ollama serve

開啟名為extension.ts的檔案並將activate函數中的程式碼替換為以下內容：

ollama pull phi3.5

此程式碼將 Hello 指令替換為 ID 為 commentgenerator.generateComment 的產生評論指令。產生註釋指令在觸發時也會顯示一則訊息訊息。

然後將該命令推送到 context.subscriptions 數組，以確保在擴充功能停用或不再需要時正確處理它。

按 F5 或從指令面板執行「偵錯：開始偵錯」指令（Ctrl Shift P）。這將在新的 擴展開發主機 視窗中運行擴充。

從新視窗中的指令面板（Ctrl Shift P）執行「產生註解」指令：

建構提示

在本部分中，您將建置將傳送至 Ollama 伺服器的提示。提示將包含程式碼區塊及其上下文，以及 LLM 的說明。此步驟對於指導 LLM 根據提供的程式碼產生有意義的註解至關重要。

要為特定程式碼區塊產生註釋，使用者首先需要將程式碼區塊複製到剪貼簿，將遊標放在應出現註解的行上，然後觸發「產生註釋」指令。包含該區塊的檔案中的整個程式碼將用作提示的上下文。

在src目錄下建立一個名為promptBuilder.ts的文件，並加入以下程式碼：

ollama list

這段程式碼定義了三個函數：getScriptContext、getCodeBlock 和 getCodeBlock。

• getScriptContext 接受當前文本編輯器作為參數，並返回當前焦點文件的整個文本，提供相關的程式碼上下文
• getCodeBlock 從剪貼簿讀取文字並將其作為程式碼區塊傳回
• selectCommentSyntax 將目前文字編輯器作為參數，並傳回檔案副檔名的適當註解語法。請注意，在此函數中，您只能處理 JavaScript 和 Python 註解語法；要處理更多語言，您將必須修改函數

現在，讓我們使用程式碼上下文、程式碼區塊和註解語法來建立提示。將以下程式碼加入promptBuilder.ts檔案：

curl -fsSL https://ollama.com/install.sh | sh

此程式碼定義了一個名為 buildPrompt 的函數，該函數將目前文字編輯器作為參數並傳回提示字串。

它首先使用先前定義的函數檢索程式碼區塊、程式碼上下文和註解語法。然後，它使用模板文字建構提示字串，並用實際值替換佔位符。

提示字串指示 LLM 編寫簡短、富有洞察力的註釋，解釋腳本中程式碼區塊的用途和功能，保持簡潔（最多兩行）並使用正確的註解語法進行包裝。法學碩士應僅關注所提供的內容，確保評論相關且準確。

現在，讓我們更新extension.ts 檔案以使用buildPrompt 函數。到extension.ts檔案的導入區塊並導入buildPrompt函數：

ollama serve

接下來，使用以下程式碼更新generateCommentCommand：

ollama pull phi3.5

此程式碼更新generateCommentCommand以擷取活動文字編輯器並使用buildPrompt函數建立提示。然後，它會記錄提示並在無法產生提示時顯示錯誤訊息。

按 F5 或從指令面板執行「偵錯：開始偵錯」指令（Ctrl Shift P）。這將在新的 擴展開發主機 視窗中運行擴充。

從新視窗中的指令面板 (Ctrl Shift P) 執行產生註解指令。

回到原來有擴充程式碼的窗口，開啟整合終端，點選除錯控制台，然後尋找產生的提示：

使用 Ollama.js 產生評論

在本部分中，您將使用 Ollama.js 庫根據提示產生註解。您將設定必要的功能來與 Ollama 伺服器通訊、向伺服器發送提示、與 LLM 互動以及接收產生的註釋。

在src目錄下建立一個名為ollama.ts的文件，並加入以下程式碼：

curl -fsSL https://ollama.com/install.sh | sh

此程式碼從 ollama 模組導入 Ollama 類，並從 cross-fetch 模組導入 fetch 函數。然後，它使用指定的主機和取得函數來建立 Ollama 類別的新實例。

此處，您使用交叉取得模組建立 Ollama 實例，以避免當 LLM 花費太長時間產生回應時 Ollama 伺服器可能會拋出逾時錯誤。

現在，讓我們定義generateComment函數，該函數將提示作為參數並傳回產生的評論。將以下程式碼加入 ollama.ts 檔案：

ollama serve

此程式碼定義了generateComment函數，該函數將提示作為參數並傳回產生的註解。

它首先使用 Performance.now 函數來記錄開始時間。然後，它使用ollama實例的generate方法向Ollama伺服器發送請求，並傳入phi3.5作為模型名稱和提示符。

接下來，它記錄結束時間並記錄 LLM 產生回應所花費的時間。

最後，它會傳回儲存在回應中的產生評論。

現在，讓我們更新extension.ts 檔案以使用generateComment 函數。首先，到extension.ts檔案的導入區塊並導入generateComment函數：

ollama pull phi3.5

接下來，更新generateCommentCommand中的程式碼：

ollama list

此程式碼更新generateCommentCommand以使用generateComment函數產生註解。然後，它會記錄產生的評論，並在無法產生評論時顯示錯誤訊息。

按 F5 或從指令面板執行「偵錯：開始偵錯」指令（Ctrl Shift P）。這將在新的 Extension Development Host 視窗中編譯並執行擴充。

開啟要產生註解的文件，導航到所需的程式碼區塊，複製它，然後將遊標放在要新增註解的行中。接下來，從新視窗中的命令面板（Ctrl Shift P）執行「產生註解」命令。

回到有擴充程式碼的原始窗口，開啟整合終端，點選偵錯控制台，然後尋找產生的註解：

請記住，LLM 產生回應所需的時間可能會因您的硬體而異。

將註解新增到腳本中

在本部分中，您將把產生的註解加入到腳本中使用者呼叫「產生註解」指令的行處。此步驟涉及管理編輯器將註釋插入程式碼中的適當位置。

在src目錄下，建立一個名為manageEditor.ts的文件，並加入以下程式碼：

curl -fsSL https://ollama.com/install.sh | sh

這段程式碼首先將整個 Visual Studio Code API 匯入到目前模組中，然後定義兩個名為 getCurrentLine 和 addCommentToFile 的函數。

getCurrentLine 函數將目前文字編輯器作為參數並傳回目前行號。

addCommentToFile 函數將檔案 URI、檔案名稱、行號和產生的註解作為參數，並將註解新增至檔案的指定行處。它首先建立一個新的 WorkspaceEdit 物件並在指定位置插入註解。然後它應用編輯並顯示一條訊息訊息。

現在，讓我們更新 extension.ts 檔案以使用 addCommentToFile 函數。

到extension.ts檔案的導入區塊並導入getCurrentLine和addCommentToFile函數：

ollama serve

接下來，更新generateCommentCommand中的程式碼：

ollama pull phi3.5

此程式碼更新generateCommentCommand以使用getCurrentLine函數擷取檔案URI、檔案名稱和目前行號。然後，它使用 addCommentToFile 函數將註解新增至檔案的目前行。

按 F5 或從指令面板執行「偵錯：開始偵錯」指令（Ctrl Shift P）。這將在新的 擴展開發主機 視窗中運行擴充。

開啟要產生註解的文件，導航到所需的程式碼區塊，複製它，然後將遊標放在要新增註解的行中。

接下來，從命令面板執行「產生註解」命令（Ctrl Shift P），幾秒鐘（或幾分鐘，取決於您的硬體）後，註解將放置在指定行上（您可以按Alt Z如果註解行太長，則將其換行）：

結論

軟體開發世界充滿了關於使用人工智慧協助編碼任務的討論，包括產生程式碼註釋。

在本教程中，我們逐步建立了 VS Code 擴展，以使用 Ollama.js 庫和本地 LLM 來自動進行程式碼註解。我們示範了一些人工智慧編碼工具如何在不損害資料隱私或不需要付費訂閱的情況下簡化您的文件流程。

---

只需幾分鐘即可設定 LogRocket 的現代錯誤追蹤：

1. 造訪 https://logrocket.com/signup/ 以取得應用程式 ID。
2. 透過 NPM 或 script 標籤安裝 LogRocket。 LogRocket.init() 必須在客戶端調用，而不是伺服器端。

NPM：

ollama list

腳本標籤：

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

3.（可選）安裝插件以與您的堆疊進行更深入的整合：

• Redux 中介軟體
• ngrx 中介軟體
• Vuex 外掛程式

立即開始

以上是使用 VS Code 和 Ollama 自動進行程式碼註釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！