概要
本文将为初学者解说如何在 VSCode 中创建利用 DeepSeek R1 的扩展功能，并在本地作为 AI 助手运行。虽然有一种 VSCode 风格的编辑器 Cursor 可以在 AI 的支持下进行开发，但对于“价格高昂且无法使用”的用户，不妨尝试免费引入 AI 助手。
关于 DeepSeek
随着 AI 技术的进步，大规模语言模型的研究变得活跃。其中，中国的 DeepSeek 公司开发的大规模语言推理模型 DeepSeek R1 作为高性能且低成本的推理模型备受关注。2025 年 1 月 27 日，由于 DeepSeek 的影响，负责 AI 推理模型学习所需 GPU 制造的美国最大企业 Nvidia 的股票暴跌，这一影响的巨大程度再次被证明，被称为 DeepSeek 冲击。
DeepSeek 能够以远低于传统的 OpenAI 和 Google 所采用的方法的成本进行大规模模型的学习，成为许多开发者的一个有吸引力的选择。与 OpenAI 相比，API 使用费用也非常便宜，且与 OpenAI 4o 相比，性能没有明显差距。
以下的图表比较了 DeepSeek-R1 与其他服务的 o1 类推理模型每百万个标记的输入/输出 API 费用。
DeepSeek-R1 和 o1 的费用比较（图片引用: DeepSeek API 文档 ）
DeepSeek 可以在公司提供的网站上进行试用，但直接使用会有数据被发送到中国并用于学习的担忧。通过在本地环境中使用 DeepSeek，可以在不将输入数据发送到中国的情况下进行使用。
此外，通过在本地环境中使用 DeepSeek，可以在不支付像 OpenAI 这样的月费的情况下，免费利用 AI 的力量。DeepSeek 的技术基础几年前就已作为论文发表，这个时机之所以引起广泛关注，可能与特朗普政府的重点项目 Stargate 有关……
実装方法
我将解释实现方法。其机制是使用名为 Ollama 的工具在本地运行模型，创建一个独特的自定义 VSCode 扩展功能，以便直接在编辑器中聊天，而不是在命令行中聊天。
1. 创建 VSCode 扩展功能
首先，准备好创建 VSCode 扩展的环境。VSCode 的官方网站提供了扩展开发用的模板，因此请执行以下命令以创建项目。
npx --package yo --package generator-code -- yo code执行此命令将设置扩展功能的模板。
如果要求安装 yo，请按 y 进行安装。
选择New Extension (TypeScript)，确定扩展功能名称，其它项目保持默认设置。
2. 扩展功能的基本结构
2-1. 命令的注册
打开创建的项目中的 src/extension.ts，可以看到定义了扩展功能的入口点 activate 函数。该函数在扩展功能启动时执行。
importで読み込んでいる vscode 包含访问 VSCode API 的功能，例如，可以打开窗口或显示错误消息。
要注册新命令，请使用 commands.registerCommand。
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "deepseek-ext" is now active!');
const disposable = vscode.commands.registerCommand('deepseek-ext.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from DeepSeek-ext!');
});
context.subscriptions.push(disposable);
}在 activate 函数内定义的命令需要在package.json中的contributes.commands中注册命令。
在使用开发用模板创建项目时，您可能已经填写了相关内容。命令名称必须与源代码中写的字符串相同。
"contributes": {
"commands": [
{
"command": "deepseek-ext.helloWorld",
"title": "Hello World"
}
]
}
2-2. 扩展功能的动作测试
通过编译并安装到本地环境中可以确认其运行，但更简单的方法是使用调试器。
按下F5键，或选择工具栏中的Run -> Start Debugging，以启动调试器。将会新打开一个安装了正在开发的扩展功能的 VSCode 窗口。
新打开的窗口中，Windows 的情况下按 Ctrl + P，Mac 的情况下按 Command + Shift + P 打开命令面板，输入刚才创建的命令（本文中为 Hello World），即可执行该命令。如果屏幕右下角出现 Hello World from DeepSeek-ext! 的弹出窗口，则表示操作确认成功。
3. 在本地环境中运行 DeepSeek R1
要在本地运行 DeepSeek R1，您需要使用 Ollama 这个工具。Ollama 不仅限于 DeepSeek，还提供下载开源 AI 模型和运行所需工具的功能。请安装 Ollama，并获取 DeepSeek R1 的模型。
3-1. Ollama 的安装
前往 Ollama 的网站，下载 Ollama 的安装程序，然后安装 Ollama。
Ollama: Download Ollama on macOS
由于提供了 npm 包，因此我们将使用 npm 命令安装 Ollama。
- Ollama: Download Ollama on macOS
npm install ollama3-2. DeepSeek R1 的安装
从 Ollama 的网站下载 DeepSeek R1 的语言模型。
- Ollama DeepSeek R1: deepseek-r1
语言模型有几种，但如果是较大的模型，推理的精度会更高，但文件大小也会更大，推理所需的时间也会更长。首先，建议使用精度较低但响应较快的模型进行测试，如果精度不足，可以逐步提高。
安装完成后，使用以下命令下载 DeepSeek R1 的模型。
这次将安装带有latest的默认设置7b。
ollama pull deepseek-r1:latest要使用1.5b模型，可以通过deepseek-r1:1.5b进行安装。
ollama pull deepseek-r1:1.5b
4. 从 VSCode 扩展功能调用 DeepSeek R1 的实现
要从 VSCode 访问本地环境中的DeepSeek R1模型，将在扩展功能中使用Ollama。
4-1. 事前准备
请打开tsconfig.json，并在lib中添加用于利用 HTML 的 window 等的DOM。如果没有这个描述，在使用 Ollama 的模块时会出现错误。
{
"compilerOptions": {
// 中略
"lib": [
"ES2022",
+ "DOM" // for document, window, etc.
],
// 中略
}
}
返回到extiension.ts，在 activate 函数内添加通过命令执行的处理。在此之前，将扩展功能的执行命令名称从helloWorld更改为deepseekChat。
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand('deepseek-ext.deepseekChat', () => {
// 后面会在这里写实现的逻辑
});
}
请同样修改 package.json。
"contributes": {
"commands": [
{
- "command": "deepseek-ext.helloWorld",
- "title": "Hello World"
+ "command": "deepseek-ext.deepseekChat",
+ "title": "DeepSeek Chat"
}
]
}
4-2. 用户界面的创建
接下来，创建一个聊天框，以便与 DeepSeek R1 进行交互。由于我想将 GUI 自定义为 Webview，因此将使用 createWebviewPanel 创建面板。
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand('deepseek-ext.deepseekChat', () => {
const panel = vscode.window. createWebviewPanel(
'deepSeekChat',
'DeepSeek R1 Chat',
vscode.ViewColumn.One,
{ enableScripts: true }
);
// 中略
});
context.subscriptions.push(disposable);
}
创建一个名为 getWebviewContent 的函数，编写用于 UI 的 HTML 并将其返回给函数调用者。
返却的 HTML 使用反引号(`)进行分隔。被反引号包围的 HTML 通常不会被解析，因此安装es6-string-html这个 VSCode 的扩展功能会使其更易于阅读和使用。
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand('deepseek-ext.deepseekChat', () => {
const panel = vscode.window. createWebviewPanel(
'deepSeekChat',
'DeepSeek R1 Chat',
vscode.ViewColumn.One,
{ enableScripts: true }
);
panel.webview.html = getWebviewContent(); // 追加
// 中略
});
context.subscriptions.push(disposable);
}
const getWebviewContent = (): string => {
return /*html*/ `<! DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" / >
<style>
body { font-family: sans-serif; margin: 1rem; }
#prompt { width: 100%; box-sizing: border-box; border-radius: 0.25rem; padding: 0.5rem; margin-top: 0.5rem; }
#askBtn { margin-top: 0.5rem; font-size: 0.75rem; padding: 0.2rem 0.5rem; border: 1px solid #aaa; border-radius: 0.25rem; background-color: #8EA8F9; }
#askBtn: hover { background-color: #ABBEF8; }
#response { border: 1px solid #aaa; border-radius: 0.25rem; margin-top: 2rem; padding: 0.5rem; min-height: 100px; }
</style>
</head>
<body>
<h2>DeepSeek Chat</h2>
<textarea id="prompt" placeholder="Type something..."></textarea>
<br/>
<button id="askBtn">Ask</button>
<div id="response"></div>
</body>
</html>`;
};
在这种状态下，使用调试器确认一次后，将显示如下画面。
4-3. GUI 与 VSCode 扩展功能的消息的收发
4-3-1. 将用户输入的文本发送到 VSCode 扩展功能进行处理
接下来，将在 Webview 的文本框中输入的内容发送到 VSCode 的扩展功能进行处理。
在 getWebviewContent 函数内的 <body> 标签中添加 <script> 标签，并编写按钮按下事件的处理和从扩展功能接收消息时的处理。要将 Webview UI 中输入的内容发送到 VSCode 的扩展功能处理，可以使用 vscode.postMessage。为了让接收方能够识别消息的类型，给它命名为 chat。
<script>
const vscode = acquireVsCodeApi();
document.getElementById('askBtn').addEventListener('click', () => {
const text = document.getElementById('prompt').value;
vscode.postMessage({ command: 'chat', text });
});
window.addEventListener ('message', event => {
const { command, text } = event.data;
if (command === 'chatResponse') {
document.getElementById('response').innerText = text;
}
});
</script>
4-3-2. 用户输入的文本发送到DeepSeek R1 并获得响应
用户输入可以通过 panel.webview.onDidReceiveMessage 接收。当消息名称为chat时，将用户输入的文本发送到通过 ollama 安装的DeepSeek R1，并将响应显示在 UI 中。要将扩展功能处理的结果发送到 Webview 的 UI，可以使用panel.webview.postMessage。为了让接收方知道消息的类型，命名为chatResponse。
const disposable = vscode.commands.registerCommand('deepseek-ext.deepseekChat', () => {
// 中略
panel.webview.html = getWebviewContent();
panel.webview.onDidReceiveMessage(async (message: any) => {
switch (message.command) {
case 'chat':
const userPrompt = message.text;
const chatRequest: ChatRequest & { stream: true } = {
model: 'deepseek-r1:latest',
messages: [{ role: 'user', content: userPrompt }],
stream: true
};
let responseText = '';
try {
const streamResponse = await ollama.chat(chatRequest);
for await (const part of streamResponse) {
responseText += part.message.content;
panel.webview.postMessage({ command: 'chatResponse', text: responseText });
}
}
catch (error: any) {
responseText = `Error: ${error.message}`; する
panel.webview.postMessage({ command: 'chatResponse', text: responseText });
break;
}
}
});
// 中略
}
4-3-3. 在屏幕上显示 DeepSeek R1 的响应
为了在屏幕上显示响应结果，我们将在 `getWebviewContent` 函数内的 <script> 标签内添加处理以接收消息事件。当接收到的消息名称为 chatResponse 时，将结果插入到 HTML 的 DOM 中。
<script>
const vscode = acquireVsCodeApi();
// 中略
window.addEventListener ('message', event => {
const { command, text } = event.data;
if (command === 'chatResponse') {
document.getElementById('response').innerText = text;
}
});
</script>
4-4. 动作确认
启动 VSCode 的调试器，打开命令面板，输入'DeepSeek Chat'进行功能确认。
5. 扩展功能的构建和安装
要构建开发中的扩展功能，可以使用名为vsce的模块。可以通过 npm 进行安装。
npm install vsce --save-dev在构建之前，需要修改在创建模板时添加的README.md。如果README.md的第三行附近的内容没有修改差异，构建时会出现错误，因此暂时想要构建的用户可以删除这一行。
This is the README for your extension "deepseek-ext". After writing up a brief description, we recommend including the following sections.
在控制台中执行以下命令即可进行构建。
npx vsce package无事地构建成功后，我认为在项目的根目录中会生成一个扩展名为.vsix的文件。
DONE Packaged: /Path/to/project/dir/deepseek-ext-0.0.1.vsix (27 files, 43.64KB)
如果您想安装创建的扩展功能，请在 VSCode 的Extensions中点击三点菜单图标，然后点击“Install from VSIX...”，选择刚刚创建的.vsix 文件。
打开命令面板，输入'亜深探查聊天'，就可以使用刚才创建的命令，因此我们将执行并确认其功能。
无事动作确认已经完成。
总结
介绍了如何使用 VSCode 扩展功能在本地利用 DeepSeek R1。通过开发扩展功能，可以安全且低成本地利用 AI 助手。请务必试试看。