使用VS Code插件搭建AI开发环境完全指南

使用VS Code插件搭建AI开发环境完全指南

前篇:

AI编程教学:手把手搭建AI编程环境(IDE/插件/CLI方案)

Claude code免费体验+安装方式,对接国产大模型,Node + 配置教程

01. AI编程工具概述

目前主流的AI编程工具主要分为三类:集成IDE、插件模式和独立CLI。

其中,插件模式以其轻量级和高兼容性成为许多开发者的首选。通过在VSCode中安装相应插件,开发者可以在不离开熟悉的编辑器环境的情况下,享受到AI辅助编程的便利。

插件模式的优势在于:

  • 无需切换编辑器,保持开发环境一致性
  • 可根据需求灵活选择不同AI模型
  • 资源占用小,启动速度快
  • 支持与本地开发环境深度集成

02. VS Code AI插件选择

目前市场上有多种VS Code AI插件可供选择,各有特色。以下是几款主流插件的对比分析:

添加图片注释,不超过 140 字(可选)

综合对比下来,RooCode是目前最推荐的VS Code AI插件,它不仅支持多种模型和模式切换,而且对中文的支持非常友好,适合国内开发者使用。

03. RooCode插件安装与配置

3.1 安装RooCode插件

安装RooCode插件的步骤非常简单:

1.打开VSCode,点击左侧边栏的"扩展"图标(或使用快捷键Ctrl+Shift+X)

2. 在搜索框中输入"RooCode",找到带有小袋鼠图标的插件

3. 点击"安装"按钮,等待安装完成

4. 安装完成后,插件默认会出现在侧边栏底部,可将其拖动到侧边栏上方以便使用

3.2 RooCode主要功能模式

RooCode提供三种主要工作模式,满足不同开发需求:

  • 架构模式:适合架构师进行项目计划和设计
  • Code模式:专注于代码编写,提供实时建议和补全
  • Ask模式:用于问答形式的知识查询和问题解决

3.3 整体架构与工作原理

VS Code AI开发环境的整体架构如下:

1. VS Code作为基础编辑器平台

2. RooCode插件作为AI客户端,负责与AI模型交互

3. 通过API调用方式连接到AI模型服务(原生API或聚合平台)

4. 插件通过工具调用(读文件、写文件、查找等)操作VS Code中的文件

PS. VS Code本身不具备直接与AI模型交互的能力,需要通过插件作为中间层,实现编辑器与AI模型的通信。

04. 对接AI模型服务

配置RooCode插件后,需要对接具体的AI模型服务才能正常使用。目前主要有两种对接方式:通过聚合平台或直接对接原生API。

4.1 通过摩搭社区对接(免费方案)

摩搭社区(ModelScope)是一个模型开源社区,提供多种AI模型的API服务,适合开发者免费体验。以下是对接步骤:

1. 注册摩搭社区账号

  • 访问摩搭社区官网并注册账号
  • 绑定阿里云账号,获得每日2000额度

2. 申请访问令牌(TOKEN)

  • 进入账号设置,找到"访问令牌"选项
  • 点击"创建令牌",保存生成的TOKEN

3. 配置RooCode插件

在VS Code中打开RooCode设置(点击插件图标旁的小齿轮)

  • API提供商选择"Open AI接入模式"
  • 粘贴摩搭社区的API base URL
  • 输入申请的TOKEN
  • 选择模型(如Deepseek 3.2、千问3等)

目前摩搭社区提供的可用模型包括:

  • Deepseek V3.2:12月最新发布,性能对标GPT5
  • 千问3:阿里达摩院开发的大语言模型
  • GLM系列:部分模型仅支持网页端使用,不提供API访问

05. 直接对接原生API(付费方案)

对于有更高需求的开发者,可以考虑直接对接模型厂商提供的原生API,获得更稳定的服务和更丰富的功能。以下是几个主流国产模型的接入方案:

Minimax M2模型

Minimax提供的M2模型性能优秀,支持图文理解,适合中文场景。

1. 访问Minimax官网,注册API开放平台账号

2. 选择Coding plan,每月29元,新用户送15元余额

3. 创建API密钥并复制

4. 在VS Code中新建settings.json文件,配置: { "roocode.apiKey": "你的API密钥", "roocode.baseUrl": "https://api.minimax.chat/v1/text/chatcompletion_pro", "roocode.model": "m2" } 5. 保存配置并重启VS Code

GLM模型

GLM提供的Coding plan性价比高,首月仅需20元。

  • 首月20元,第二个月起40元
  • 支持多种编程任务,中文理解能力强
  • 配置方式与Minimax类似,需使用GLM提供的API地址和密钥

Deepseek模型

Deepseek采用按TOKEN收费模式,适合用量波动较大的场景。

  • 按TOKEN收费,1000万TOKEN约3-4元
  • 12月最新发布的V3.2模型性能强劲
  • 适合对成本敏感且用量不稳定的用户
不同模型的API接口格式可能略有差异,配置时需参考各厂商提供的开发文档,确保base URL和请求参数格式正确。

05环境测试与使用

完成插件安装和模型配置后,建议进行简单测试以确保环境正常工作:

1. 基础功能测试

打开RooCode插件,切换到"Ask"模式

输入简单问题,如"如何用Python实现快速排序",检查是否能得到有效回答

2. 代码生成测试

新建一个代码文件

切换到"Code"模式,输入注释描述需要实现的功能

检查插件是否能根据注释生成合理的代码

3. 模型切换测试

  • 尝试切换不同模型,比较生成结果的差异
  • 根据任务类型选择最适合的模型

06高级配置与优化

多模型管理

对于需要同时使用多个AI模型的开发者,可以通过配置多个插件实例或使用支持多模型的插件来实现。RooCode支持在不同项目中保存不同的模型配置,满足多样化需求。

快捷键设置

为常用的AI功能设置快捷键可以进一步提升效率:

1. 打开VS Code快捷键设置(Ctrl+K, Ctrl+S)

2. 搜索RooCode相关命令

3. 为常用命令(如"生成代码"、"解释代码"等)设置自定义快捷键

资源监控

使用AI模型时需注意资源消耗:

  • 定期检查API使用情况,避免超出预算
  • 对于按TOKEN收费的模型,注意优化提示词,减少不必要的TOKEN消耗
  • 合理设置模型参数(如temperature),平衡生成质量和资源消耗

视频教程👇

VS Code 配置 AI 插件,小白零成本体验 AI 编程_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1jRqZBHEfL?spm_id_from=333.788.videopod.episodes&vd_source=5f0dbc9a3c34dd18b25b4e26b6a58a6c&p=3

在新中地GIS开发特训营,也引入了AI编程工具,在掌握基础编程的前提下,快速提升编程效率,将工作中繁杂的问题简单化,下面是同学们课堂上使用AI编程工具制作的案例。

图片

图片

图片

图片

新中地GIS开发特训营全年开班

从零基础到三维GIS开发工程师,学完推荐就业!

现开启免费试听模式,同步特训营内容👇

新中地教育GIS开发课程咨询官方入口 - 哔哩哔哩 (bilibili.com)https://www.bilibili.com/opus/1107861289058697224?spm_id_from=333.1387.0.0

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.