尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Qwen Code Companion:把 Qwen Code 原生接入 VS Code 的 IDE 扩展实战指南

Qwen Code Companion:把 Qwen Code 原生接入 VS Code 的 IDE 扩展实战指南 Qwen Code Companion把 Qwen Code 原生接入 VS Code 的 IDE 扩展实战指南【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code导读本文围绕 Qwen Code 开源仓库中的 VS Code 扩展包qwen-code-vscode-ide-companion即 Qwen Code Companion展开讲解如何把终端里的 AI 编程代理 Qwen Code 以原生 IDE 的形态接入 VS Code 生态通过 Qwen 图标面板发起对话、在 VS Code 原生 diff 视图中审阅与接受改动、 提及文件或附加图片、管理多会话与历史记录以及分享活动文件与选区上下文。读完本文你将掌握该扩展的安装、面板唤起、命令、配置项与底层 ACP 连接原理并能独立完成从安装到日常编码辅助的完整上手流程。一、扩展定位Qwen Code 的原生 IDE 体验层Qwen Code Companion发布名qwen-code-vscode-ide-companiondisplayName 为 Qwen Code Companion见 package.json是 Qwen Code 官方提供的 VS Code 扩展。它把原本运行在终端里的 Qwen Code 以「原生 IDE 功能 直观聊天界面」的形态嵌入 Visual Studio Code零额外安装扩展自带 Qwen Code CLIdist/qwen-cli/cli.js无需单独安装 CLI 即可开始使用原生交互聊天面板、diff 审阅、文件管理全部复用 VS Code 原生能力而不是在终端模拟器里重造一套双入口既可以在侧边栏 Activity Bar 使用聊天视图也可以在编辑器区域打开聊天标签页editor tab且两者可同时存在、并行运行多个会话。从源码结构看该扩展是一个标准的 VS Code 扩展工程activationEvents、contributes、main等字段齐全其核心目录包括目录职责src/extension.ts扩展激活入口负责注册视图、命令、diff 管理器与 IDE 服务器src/commands/index.ts聊天相关命令的注册与实现src/diff-manager.ts原生 diff 视图的生命周期管理src/services/ACP 连接、会话读取/管理、文件处理等后台服务src/webview/聊天面板的 WebView 前端Reactschemas/settings.schema.json.qwen/settings.json的 JSON Schema 校验该扩展遵循 Apache-2.0 协议当前处于preview预览状态版本号 0.23.3分类为 AIengines.vscode要求^1.96.0即 VS Code 1.96.0 及以上。二、安装与运行环境要求2.1 环境要求Visual Studio Code 1.96.0 或更新版本。官方 README 明确说明同样适用于Cursor、Windsurf等基于 VS Code 的编辑器——从源码看扩展在非 Windows 平台统一使用ELECTRON_RUN_AS_NODE1借助 IDE 内置的 Electron 运行时执行 Node 脚本见 extension.ts 中的注释与实现这正是它对各种 VS Code 系编辑器兼容性良好的原因。无需预装 Qwen Code CLI扩展会捆绑 CLIdist/qwen-cli/cli.js。2.2 安装方式从VS Code Marketplace或Open VSX Registry搜索Qwen Code Companion扩展 IDqwenlm.qwen-code-vscode-ide-companion安装即可这也是 README Quick Start 给出的官方途径。安装后需要重新加载窗口Reload Window使扩展激活。本地开发调试如需在源码层面调试扩展可按 development.md 的指引在仓库根目录执行npm install用 VS Code 打开packages/vscode-ide-companion目录运行npm run watch启动 esbuild TypeScript 双监视编译再按F5打开扩展开发宿主窗口。开发模式下聊天面板会通过仓库根目录scripts/dev.js启动 CLICLI 与 core 的改动在下次 ACP 进程启动时自动生效无需重新构建。三、快速上手从打开面板到第一次对话按 README 的 Quick Start三步即可开始使用安装扩展见上文打开聊天面板二选一点击编辑器右上角的Qwen 图标该按钮即Qwen Code: Open命令注册在editor/title菜单的navigation分组见 package.json 的menus部分通过命令面板CmdShiftP/CtrlShiftP运行Qwen Code: Open开始聊天让 Qwen 帮你写代码、解释代码、修 Bug 或实现新功能。从实现细节看Open 命令的行为是如果已存在编辑器标签页形式的聊天 provider则激活最近的一个否则新建一个见 commands/index.ts。此外还有Qwen Code: Focus Chat Viewqwen-code.focusChat聚焦侧边栏 Activity Bar 中的聊天视图默认快捷键为CtrlShiftLmacOS 为CmdShiftL见 package.json 的keybindingsQwen Code: New Conversationqwen-code.newConversation总是新开一个编辑器标签页开始全新对话。第一次启动聊天面板时扩展会通过 ACPAgent Client Protocol以子进程方式拉起捆绑的 CLIcli.js --acp --channelVSCode见 acpConnection.tsCLI 进程是认证状态的唯一权威来源源码注释明确 CLI is now the single source of truth for authentication state。四、命令速查表README 给出了 4 个核心命令结合 package.json 的contributes.commands与 commands/index.ts完整命令清单如下命令Command ID说明Qwen Code: Openqwen-code.openChat打开 Qwen Code 聊天面板编辑器标签页形态Qwen Code: Runqwen-code.runQwenCode在终端中启动经典终端会话使用捆绑 CLIQwen Code: Accept Current Diffqwen.diff.accept接受当前显示的 diffQwen Code: Close Diff Editorqwen.diff.cancel关闭/拒绝当前 diffQwen Code: Focus Chat Viewqwen-code.focusChat聚焦侧边栏聊天视图CtrlShiftLQwen Code: New Conversationqwen-code.newConversation新开一个聊天标签页Qwen Code: Authqwen-code.auth打开聊天面板并启动交互式认证流程Qwen Code: Show Logsqwen-code.showLogs显示扩展输出日志通道Qwen Code CompanionQwen Code: View Third-Party Noticesqwen-code.showNotices查看第三方开源声明NOTICES.txtQwen Code: Copy Message/Copy All Messages/Copy Last Replyqwen-code.copyMessage等在聊天消息上右键菜单中复制单条/全部/最后回复几点使用提示Accept Current Diff的快捷键在 diff 视图可见时CtrlSmacOSCmdS直接接受 diffClose Diff Editor则用于放弃改动。qwen.diff.accept/qwen.diff.cancel只在 diff 视图可见时出现在命令面板when: qwen.diff.isVisible。Run的细节该命令会要求先打开一个文件夹若打开多个文件夹会弹出选择器。随后扩展会在选中的工作目录里新建一个名为Qwen Code (文件夹名)的终端并把工作区所有文件夹路径通过QWEN_CODE_IDE_WORKSPACE_PATH环境变量传给 CLI见 extension.ts。Auth用于配置 API Key 提供方ModelStudio 或自定义 OpenAI 兼容提供方详见下一节。五、扩展配置Provider、API Key 与通知选项扩展在 VS Code 设置中暴露了 4 个配置项见 package.json 的contributes.configuration可通过Cmd/Ctrl,打开设置搜索qwen-code前缀进行配置配置项类型默认值说明qwen-code.provider枚举coding-plan/api-keycoding-plancoding-plan在 VS Code 设置中直接填入 API Key 与 Region同步到~/.qwen/settings.jsonapi-key使用Qwen Code: Auth命令或引导按钮配置 ModelStudio 或自定义 OpenAI 兼容提供方qwen-code.apiKeystring用于Coding Plan设置同步的 API Keyapi-key提供方的完整信息请通过Qwen Code: Auth配置qwen-code.codingPlanRegion枚举china/globalchinaCoding Plan 的区域china对应阿里云百炼aliyun.comglobal对应 Alibaba Cloudalibabacloud.com。仅在 provider 为coding-plan时生效qwen-code.dotIndicatorbooleantrue当任务完成橙色点或需要你注意蓝色点时在隐藏的标签页图标上显示彩色圆点qwen-code.notificationsbooleantrue当任务完成至少持续 20 秒或需要你注意时在未查看 Qwen Code 面板的情况下显示带声音的系统通知qwen-code.provider的两种取值对应两套认证路径Coding Plan编码计划在设置里填入 API Key 与 Region扩展负责把配置同步进~/.qwen/settings.json属于设置驱动的配置方式API Key通过Qwen Code: Auth命令或 onboarding 引导按钮启动交互式认证startInteractiveAuth()见 commands/index.ts适合 ModelStudio 密钥或自定义 OpenAI 兼容端点。另外扩展还在.qwen/settings.json文件上挂载了 JSON Schema 校验fileMatch: **/.qwen/settings.json→schemas/settings.schema.json当你在项目里编辑 Qwen Code 的项目级设置时VS Code 会提供补全与校验。该 Schema 覆盖mcpServers、channels、serve、modelProviders、providerProtocol、plansDirectory、env、proxy、general、ui、model、telemetry等大类——例如general.language可设为auto/en/zh/zh-TW等model.reasoningEffort支持none/low/medium/high/xhigh/maxui.theme默认 Qwen Dark这些都可在编辑器里获得即时校验与文档提示详见 settings.schema.json。六、原生 diff 体验审阅、编辑与接受改动README 强调的Native diffing是该扩展最核心的体验之一。其底层由 diff-manager.ts 实现机制如下聊天会话中 Qwen 产生文件修改时扩展通过qwenCode.showDiff命令内部为diffManager.showDiff()以qwen-diff:自定义 scheme 打开 VS Code 原生 diff 编辑器左侧为修改前内容oldText右侧为修改后内容newTextDiffContentProvider作为TextDocumentContentProvider提供两侧内容并维护变更通知见 diff-manager.ts你可以直接在右侧编辑修改然后通过Qwen Code: Accept Current Diffqwen.diff.accept接受或Qwen Code: Close Diff Editorqwen.diff.cancel关闭/拒绝。值得注意的工程细节去重与防抖DiffManager对最近 1.5 秒内相同文件内容的showDiff调用做去重DEDUPE_WINDOW_MS 1500并在有权限抽屉permission drawer打开时延迟打开 diff、在 auto/yolo 模式下完全抑制 diff 弹出见 extension.ts接受/拒绝即投票qwen.diff.accept与qwen.diff.cancel不仅处理普通 diff还会把用户的决定作为allow/cancel投票转发给持有待决权限请求的聊天界面respondToPendingPermission实现权限审批与 diff 审阅的闭环关闭语义手动关闭权限型 diff 标签页不视为投票扩展会把该事件广播给所有聊天界面避免界面一直等待一个用户再也看不到的编辑决策源码注释引用 issue #10557 说明此行为见 extension.ts。七、文件管理与会话能力README 的 Features 部分提到的文件与会话能力在源码中均有对应实现7.1 提及文件与附加图片聊天输入支持-mention 文件也可以使用系统文件选择器附加文件和图片。图片经imageSupport.ts等工具处理后以 base64/data URI 形式进入会话具体包括拖拽/粘贴/选择器三种附加入口对图片体积与格式做校验处理并支持多图源码中imageSupport.ts及其测试 imageSupport.test.ts 覆盖了这些路径。7.2 打开文件与选区上下文扩展内置OpenFilesManager见 open-files-manager.ts持续跟踪工作区状态监听活动编辑器切换与选区变化维护打开文件列表最近使用优先排序addOrMoveToFront同时跟踪光标位置与选中文本并以防抖方式通知 UIfireWithDebounce对Notebook 文件如.ipynb有专门处理支持 notebook 单元级选择与活动上下文同步见 notebook-handler.ts。这些上下文通过 IDE 集成协议提供给 CLI让 Qwen 在回答问题时能感知你正在看哪个文件、光标在哪、选了什么——这正是 Share active files, cursor position, and selections for more precise help 的实现基础。7.3 会话历史与多会话并行会话列表支持查看历史会话会话获取采用先 ACP 后文件系统的降级策略优先调用 ACP 的session/list兼容新版sessions字段与旧版items字段失败则回退扫描本地会话文件见 qwenAgentManager.ts分页加载getSessionListPaged支持基于游标cursor size默认 20 条的分页方便大量会话时的滚动加载多会话并行聊天标签页与侧边栏视图可以同时存在多个各自独立运行会话互不干扰。八、底层原理ACP 连接与 WebView 架构8.1 ACP扩展与 CLI 的通信协议Qwen Code Companion 通过Agent Client ProtocolACP与捆绑的 CLI 通信这是理解整个扩展的关键扩展以子进程拉起 CLIprocess.execPath cli.js --acp --channelVSCode并设置ELECTRON_RUN_AS_NODE1、QWEN_CODE_SCRUB_ELECTRON_RUN_AS_NODE1环境变量见 acpConnection.ts通信基于NDJSON 流ndJsonStream与 ACP SDK 的ClientSideConnection协议版本由 SDK 的PROTOCOL_VERSION定义扩展侧实现的能力包括新建/加载/列出/删除/重命名会话、发送 prompt、设置审批模式setMode与模型setModel、回滚会话rewindSession等CLI 会主动推送会话更新通知session/update、权限请求RequestPermissionRequest、AskUserQuestion、认证更新AuthenticateUpdate与slash 命令通知扩展据此驱动 UI 的流式渲染与审批交互见 qwenAgentManager.ts认证状态以 CLI 进程为单一事实来源扩展的 UI 仅是呈现层。8.2 WebView 聊天界面聊天面板是一个基于React TypeScript的 WebView 应用入口在 src/webview/index.tsx由WebViewProvider/ChatWebviewViewProvider管理生命周期ChatProviderRegistry统一管理所有聊天 provider 实例侧边栏视图 编辑器标签页负责创建、枚举与权限感知查询见 extension.ts支持WebView 面板序列化registerWebviewPanelSerializer(qwenCode.chat)会在窗口重载后恢复聊天标签页及其会话状态见 extension.tsWebView 与扩展主进程通过消息路由MessageRouter交互按主题分发到 Auth、Editor、File、Session 等处理器见 src/webview/handlers/。8.3 IDE 服务器与只读文件系统IDEServeride-server.ts为 IDE 集成提供本地 HTTP 服务并在工作区文件夹变更、工作区信任授予时同步环境变量syncEnvVars见 extension.ts扩展注册了只读文件系统 providerReadonlyFileSystemProviderscheme 见其实现用于安全地展示来自会话的只读内容如归档、只读 diff并在注册时显式声明isReadonly: true。九、日志与故障排查当会话或连接出现异常时可以借助以下手段排查查看扩展日志运行命令面板中的Qwen Code: Show Logs或打开输出面板选择Qwen Code Companion通道createOutputChannel(Qwen Code Companion)见 extension.ts日志脱敏日志通过redactLogCredentials对凭证类信息做脱敏处理后再输出见 extension.ts排查问题时无需担心 API Key 等敏感信息被明文打印断线重连若 ACP 子进程意外退出QwenAgentManager.reconnect()会重新拉起进程并创建新会话见 qwenAgentManager.ts会话校验validateCurrentSession()通过查询会话列表确认当前会话是否仍存在失效时会话会被识别见 qwenAgentManager.ts。十、常见问题与使用建议结合 README 与源码这里给出一些高频场景的处理建议多文件夹工作区运行Run会弹出文件夹选择器选择目标文件夹后终端以该目录为 cwd 启动 CLI不希望弹通知/圆点关闭qwen-code.notifications或qwen-code.dotIndicator想改用 API Key 提供方将qwen-code.provider切为api-key再执行Qwen Code: Auth按引导完成 ModelStudio 或自定义 OpenAI 兼容端点的配置diff 没弹出来检查是否处于 auto/yolo 审批模式该模式会抑制 diff 弹出或是否有权限抽屉正处于等待状态此时 diff 会延迟打开历史会话找不到扩展优先走 ACP 会话列表若 CLI 版本不支持会回退到本地会话文件扫描两者都失败时返回空列表窗口重载后聊天标签页丢失正常情况下qwenCode.chat面板会被序列化恢复若未恢复请确认日志通道是否有相关报错。十一、结语Qwen Code Companion 是 Qwen Code 从终端工具走向原生 IDE 体验的关键一环它以 ACP 协议为桥梁把 CLI 能力注入 VS Code用原生 diff、编辑器上下文跟踪、多会话管理和消息通知补齐了 IDE 场景下的交互闭环。对开发者而言安装扩展后即可获得一个无需额外配置的 Qwen Code 聊天入口对想要深入定制的人来说package.json、extension.ts、diff-manager.ts 与 schemas/settings.schema.json 是继续深入源码的四个最佳起点。说明本文所有命令、配置与行为均以当前仓库packages/vscode-ide-companionv0.23.3的实现为准扩展仍处于 preview 阶段具体行为可能随版本迭代而变化。关于第三方依赖声明可通过扩展内的Qwen Code: View Third-Party Notices查看 NOTICES.txt使用扩展即表示同意 Qwen Code 的服务条款与隐私政策并受 Apache-2.0 许可约束。【免费下载链接】qwen-codeAn open-source AI coding agent that lives in your terminal.项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表