水墨江南模型VS Code插件开发入门：打造专属AI绘画扩展

水墨江南模型VS Code插件开发入门打造专属AI绘画扩展1. 前言写技术文档、博客或者笔记的时候是不是经常觉得要是有张图能直观地说明问题就好了但找图费时画图又需要专业工具和技能最后往往就放弃了。现在AI绘画模型比如水墨江南模型已经能根据文字描述生成非常不错的图片了注本文假设你已了解如何调用水墨江南模型的API本文重点在于如何将其封装成一个VS Code插件让AI绘画能力无缝集成到你的写作流程中。2. 环境准备与项目初始化2.1 环境准备开发VS Code插件你需要准备以下环境Node.js: 推荐使用最新的LTS版本比如18.x或20.x版本。npm: Node.js的包管理器通常随Node.js一起安装。VS Code: 1.85.0或更高版本。2.2 快速创建项目VS Code官方提供了一个非常方便的命令行工具yo和generator-code脚手架可以快速生成插件项目骨架。# 全局安装 Yeoman 和 VS Code 扩展生成器 npm install -g yo generator-code # 运行生成器 yo code # 根据提示选择项目类型和配置 # 1. 选择 New Extension (TypeScript) 或 New Extension (JavaScript)本文以 TypeScript 为例 # # 2. 输入你的扩展名称例如 ink-ai-painter # 3. 输入一个标识符例如 ink-ai-painter # 4. 输入描述例如 A VS Code extension for generating images with Ink AI # 5. 选择 No 初始化 Git 仓库 (可以后续手动初始化) # 6. 选择 npm 作为包管理器 # 7. 选择 No 不使用 webpack 打包 (对于简单插件直接运行即可) # 8. 选择 No 不使用 TypeScript 的 strict mode (可选新手可选 No 以简化代码)等待脚手架生成项目文件你会得到一个结构清晰的目录其中src/extension.ts是插件的入口文件package.json是插件的配置文件。3. 核心功能设计与实现我们的核心目标是在 VS Code 的编辑器中选中一段描述图片的文字右键点击选择我们的插件命令就能调用水墨江南模型生成图片并自动插入到文档中。3.定义插件命令首先我们需要在package.json文件中声明我们的插件能做什么。打开package.json找到contributes字段如果没有就添加它。我们需要定义一个命令和一个右键菜单项。{ contributes: { commands: [ { command: ink-ai-painter.generateImage, title: Generate Image with Ink AI } ], menus: { editor/context: [ { command: ink-js-painter.generateImage, group: navigation, when: editorTextFocus !editorReadonly } ] } } }command: 定义了一个名为ink-ai-painter.generateImage的命令这是插件内部调用的标识符。title: 在命令面板中显示给用户看的名字。menus: 将我们定义的命令添加到编辑器的右键菜单中当用户选中文本且编辑器可编辑时显示。3.2 实现命令处理函数接下来我们需要在src/extension.ts文件中实现这个命令被触发时执行的逻辑。import * as vscode from vscode; import axios from axios; // 用于调用API // 你的水墨江南模型API的配置 const INK_AI_API_URL https://your-ink-ai-api-endpoint.com/generate; const API_KEY YOUR_API_KEY; // 请妥善保管不要硬编码在代码中后续会优化 export function activate(context: vscode.ExtensionContext) { // 注册命令 let disposable vscode.commands.registerCommand(ink-ai-painter.generateImage, async () { // 获取当前活动的文本编辑器 const editor vscode.window.activeTextEditor; if (!editor) { vscode.window.showErrorMessage(No active editor found!); return; } // 获取用户选中的文本 const selection editor.selection; const prompt editor.document.getText(selection); if (!prompt.trim()) { vscode.window.showWarningMessage(Please select some text as a prompt first!); return; } // 显示进度条告诉用户正在生成 await vscode.window.withProgress( { location: vscode.ProgressLocation.Notification, title: Ink AI is painting..., cancellable: false, }, async (progress) { try { // 调用水墨江南模型API const response await axios.post( INK_AI_API_URL, { prompt: prompt, // 其他参数如风格、尺寸等 style: ink-wash, width: 512, height: 512, }, { headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY}, }, } ); // 假设API返回一个包含图片URL的字段 const imageUrl response.data.url; // 构建Markdown图片语法 const markdownImage ; // 将生成的Markdown图片语法插入到文档中 editor.edit((editBuilder) { // 替换选中的文本或者插入到光标位置 editBuilder.replace(selection, mark downImage); }); vscode.window.showInformationMessage(Image generated and inserted!); } catch (error) { vscode.window.showErrorMessage(Failed to generate image: ${error}); } } ); }); context.subscriptions.push(disposable); } export function deactivate() {}4. 进阶功能与优化4.1 配置管理安全存储API密钥把API密钥直接写在代码里是非常不安全的。VS Code提供了vscode.workspace.getConfiguration和vscode.workspace.updateConfiguration来管理配置但更推荐使用vscode.SecretStorage来存储敏感信息。// 在 activate 函数中 const secretStorage context.secrets; async function getApiKey(): Promisestring | undefined { let apiKey await secretStorage.get(inkAiApiKey); if (!apiKey) { // 如果密钥不存在提示用户输入 apiKey await vscode.window.showInputBox({ placeHolder: Enter your Ink AI API Key, password: true, ignoreFocusOut: true, title: Ink AI API Key Required, }); if (apiKey) { await secretStorage.store(inkAiApiKey, apiKey); } } return apiKey; } // 在调用API前获取密钥 const apiKey await getApiKey(); if (!apiKey) { v scode.window.showErrorMessage(API Key is required to use this extension.); return; }4.2 添加配置项在package.json的contributes部分添加configuration字段允许用户配置默认图片尺寸、风格等。{ contributes: { configuration: { title: Ink AI Painter, properties: { inkAiPainter.defaultWidth: { type: number, default: 512, description: Default width of the generated image. }, inkAiPainter.defaultHeight: { type: number, type: number, default: 512, description: Default height of the generated image. }, inkAiPainter.defaultStyle: { type: string, default: ink-wash, description: Default style for the generated image. } } } } }在代码中读取配置const config vscode.workspace.getConfiguration(inkAiPainter); const defaultWidth config.getnumber(defaultWidth, 512); const defaultHeight config.getnumber(defaultHeight, 512); const defaultStyle config.getstring(defaultStyle, ink-wash);4.3 添加预览功能在生成图片后可以提供一个预览窗口让用户确认图片效果后再插入文档。cript // 在生成图片后弹出一个Webview面板预览图片 const panel vscode.window.createWebviewPanel( inkAiPreview, Ink AI Preview, vscode.ViewColumn.Beside, { enableScripts: true, } ); panel.webview.html getWebviewContent(imageUrl, prompt); panel.webview.onDidReceiveMessage( message { switch (message.command) { case insert: // 用户确认插入图片 editor.edit((editBuilder) { editBuilder.replace(selection, ); }); panel.dispose(); break; case cancel: panel.dispose(); break; } }, undefined, context.subscriptions );5. 调试与发布5.1 调试VS Code 插件开发体验非常友好可以直接在 VS Code 中调试。按F5或点击Run and Debug视图中的Run Extension。这会启动一个新的 VS Code 窗口即“扩展开发主机”。在这个新窗口中打开一个 Markdown 文件选中一段文字右键点击就能看到你的插件命令了。5.2 打包与发布开发完成后可以使用vsce工具打包和发布你的插件。# 全局安装 vsce npm install -g vscode/vsce # 打包插件生成 .vsix 文件 vsce package # 发布到 VS Code 扩展市场 # 需要先创建一个发布者账号 vsce publish6. 总结整个过程走下来其实开发一个基础的 VS Code 插件把 AI 能力集成到日常开发或写作流程中并没有想象中那么复杂。核心就是定义命令、处理命令、调用外部 API、操作编辑器内容。这个“水墨江南”插件只是一个起点你可以基于这个框架添加更多功能比如批量生成、图片风格选择、历史记录、本地缓存等等。开发插件最大的乐趣就是能亲手打造一个完全符合自己工作流的小工具。如果你对 AI 绘画和 VS Code 开发都感兴趣不妨动手试试从这个小项目开始一步步构建出你专属的 AI 创作助手。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、 model fine-tuning 等多个领域支持一键部署。