使用 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中文网其他相关文章！