EdgeOne Makers IDE 插件与 CodeBuddy
上一篇讲了 CI/CD 自动化部署，那篇适合团队协作和正式环境。但大多数时候，你只是想在写代码的过程中顺手就把项目部署了，不想来回切窗口、敲命令。IDE 插件和 CodeBuddy 就是解决这个问题的，把开发和部署集成到同一个界面里，写完代码点一下就上线。
IDE 插件是什么
IDE 插件就是装在你编辑器里的小工具，给编辑器加上额外的功能。EdgeOne Makers 的 IDE 插件让你不用离开编辑器就能完成构建和部署，省去了打开控制台、登录网站的步骤。
目前支持的 IDE 有 VSCode、Cursor、CodeBuddy。下面先讲 VSCode 的用法，CodeBuddy 作为专门的 AI 编程 IDE 后面单独讲。
VSCode 插件安装
安装过程很简单，跟装其他 VSCode 插件一样。
- 打开 VSCode
- 点左侧活动栏的扩展图标(方块形状)
- 搜索框输入
EdgeOne Makers - 找到官方插件，点 Install
环境要求:
- VSCode 1.90.0 及以上版本
- Node.js 用于本地项目构建
- Makers API Token 用于部署插件功能概览
| 功能 | 说明 |
|---|---|
| 智能检测 | 自动识别项目使用的前端框架 |
| 一键构建 | 在 IDE 集成的终端里查看构建详情 |
| 轻松部署 | 点一下按钮把项目部署到 Makers |
| 项目切换 | 在插件面板里切换不同的 Makers 项目 |
使用流程
装好插件后，使用流程分四步:
打开项目 -> 点击侧边栏 Makers 图标 -> Run Build 构建 -> Publish Project 部署第一步，在 VSCode 中打开你的前端项目文件夹。
第二步，点左侧边栏的 Makers 图标，插件面板会显示当前项目的信息。
第三步，点 Run Build 按钮，插件会自动检测框架并执行构建命令。构建过程中的日志会显示在 IDE 内置终端里。
第四步，构建成功后，点 Publish Project 按钮，项目就会部署到你的 Makers 账号下。
API Token 配置
第一次部署时需要配置 API Token。获取方式和CI/CD 集成那篇讲的一样，在控制台设置页面创建。插件会提示你输入 Token，填进去就行。
CodeBuddy IDE 集成
CodeBuddy 是腾讯云推出的 AI 编程 IDE，和 EdgeOne Makers 有更深度的集成。它不只是一个部署插件，而是把 AI 编程和 Makers 部署打通了。
CodeBuddy 是什么
CodeBuddy 有三种形态:
| 形态 | 说明 | 适合谁 |
|---|---|---|
| IDE | 独立的桌面应用，自带 AI 对话和部署功能 | 全栈开发、编程初学者 |
| 插件 | 装到 VSCode 或 JetBrains 系列 IDE 里 | 已有编辑器的开发者 |
| CLI | 命令行工具 | 运维、DevOps |
这里主要讲 CodeBuddy IDE 和 Makers 的集成。
连接 EdgeOne Makers
操作步骤:
- 打开 CodeBuddy IDE
- 点击右侧面板的
Deploy按钮 - 选择
EdgeOne Makers进行连接 - 点击
Manage进入腾讯云授权页面，登录账号完成授权
授权完成后，CodeBuddy 就和你的 Makers 账号绑定了。
配置 Makers Rules
这一步很重要。CodeBuddy 是 AI 驱动的 IDE，你可以通过自然语言让它帮你写代码。但 AI 不一定了解 Makers 的规范，所以需要给它一份规则文件。
在项目根目录配置 EdgeOne Makers Rules(官方提供了 pages-llms.mdc 规则文件)，这样 AI 写出来的代码就符合 Makers 平台的要求，避免部署后出现兼容性问题。
配置好之后，你就可以用自然语言告诉 CodeBuddy 你想做什么，比如:
帮我写一个用户登录页面，要表单验证，提交后调用 /api/login 接口CodeBuddy 会根据 Makers 的规范生成代码，包括路由、函数写法、目录结构都会自动对齐。
在 CodeBuddy 中部署
开发过程中随时可以部署:
- 通过自然语言让 CodeBuddy 完成开发任务
- 点击
Deploy按钮，或者用自然语言说”部署项目” - 选择新建项目或关联已有项目(仅限直接上传方式创建的项目)
- 等待部署完成，插件会显示预览地址
部署完成后，在 CodeBuddy 里就能直接看到项目的部署状态和预览地址。也可以跳到腾讯云控制台做进一步管理，比如绑自定义域名。
开发效率提升对比
用插件和 CodeBuddy 之前之后的开发流程对比:
| 环节 | 传统方式 | 用 IDE 插件 | 用 CodeBuddy |
|---|---|---|---|
| 写代码 | 编辑器里写 | 编辑器里写 | 自然语言描述，AI 生成 |
| 本地调试 | 终端跑 dev 命令 | 终端跑 dev 命令 | 可视化调试 |
| 构建 | 终端敲命令 | 点 Run Build | 点按钮或自然语言 |
| 部署 | 打开控制台操作 | 点 Publish | 点按钮或自然语言 |
| 查看结果 | 切换到浏览器 | 插件显示地址 | IDE 内直接查看 |
从写代码到部署上线，全程不需要离开 IDE，这是效率提升的核心。
VSCode 插件 vs CodeBuddy 怎么选
| 对比维度 | VSCode/Cursor 插件 | CodeBuddy IDE |
|---|---|---|
| 适合谁 | 已有 VSCode 环境的开发者 | 想要 AI 辅助编程的开发者 |
| 编程方式 | 自己写代码 | 可以用自然语言让 AI 写 |
| 部署能力 | 一键构建部署 | 一键构建部署 |
| AI 能力 | 取决于是否装了其他 AI 插件 | 内置 AI，且了解 Makers 规范 |
| 学习成本 | 低，插件装上就用 | 低，但需要学习自然语言沟通 |
如果你已经习惯用 VSCode，装个插件就够了。如果你希望 AI 帮你写更多代码，或者你是编程初学者，CodeBuddy IDE 的完整体验更合适。
CLI 插件对比
除了 IDE 插件，前面还讲了 CLI 工具。三种工具的定位不同:
| 工具 | 定位 | 使用场景 |
|---|---|---|
| IDE 插件 | 图形化一键操作 | 日常开发中快速部署 |
| CodeBuddy | AI 编程 + 部署一体 | 从零开发或需要 AI 辅助 |
| CLI | 命令行工具 | CI/CD 流水线、脚本自动化 |
三者不冲突，可以搭配使用。本地开发用 IDE 插件或 CodeBuddy，CI/CD 用 CLI，各取所长。
实战: 用 VSCode 插件部署一个完整项目
下面演示一个实际场景，用 VSCode 插件从零部署一个 Next.js 项目。
第一步，创建项目:
npx create-next-app@latest my-app
cd my-app第二步，正常开发，写页面、写组件、调试功能。
第三步，开发完成后，在 VSCode 左侧边栏找到 Makers 图标，点进去。
第四步，点 Run Build，插件自动检测到 Next.js 框架，执行 next build。
第五步，构建成功后，点 Publish Project，选择新建项目，输入项目名称。
第六步，等待部署完成，插件面板显示预览地址，点击就能访问线上版本。
整个过程就几分钟，构建和部署都是点按钮完成。
速查卡片
| 要点 | 说明 |
|---|---|
| IDE 插件的作用 | 在编辑器内完成构建和部署，不用切换到控制台 |
| 支持的 IDE | VSCode、Cursor、CodeBuddy |
| 安装方式 | VSCode 插件市场搜索 EdgeOne Makers |
| API Token | 首次部署需要配置，在控制台设置页面创建 |
| CodeBuddy 特点 | AI 编程 + 部署一体，支持自然语言开发 |
| Makers Rules | 配置规则文件让 AI 写出符合 Makers 规范的代码 |
| 三种工具定位 | IDE 插件(图形化)、CodeBuddy(AI编程)、CLI(自动化) |
| 推荐使用方式 | 本地开发用 IDE 插件或 CodeBuddy，CI/CD 用 CLI |