HoRain云--使用 Qoder 开发 React

云夏之末

217人浏览 · 2026-06-12 12:00:00

云夏之末 · 2026-06-12 12:00:00 发布

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

Qoder 是基于 VSCode 开源框架打造的 AI 编程平台，本章节我们将介绍使用 Qoder 开发 React。

Qoder（/ˈkoʊdər/）是一款面向真实软件开发的 Agentic 编码平台,通过增强上下文工程与智能体无缝结合，全面理解你的代码库，并以系统化方式推进开发任务。

Qoder 提供代码智能生成、智能问答、多文件修改、编程智能体等能力，思考更深入、编码更高效、构建更出色，为开发者带来高效、流畅的编码体验。

Qoder 个人版目前向所有用户提供免费试用。

1、注册并安装 Qoder

我们访问 https://qoder.com/ 注册 QoderWork 账号（免费试用 Pro 版并获赠 300 个 Credits）：

注册完成后点击右上角的下载按钮，根据你的电脑系统，下载安装程序。

下载后，双击文件开始安装，然后，双击 Qoder IDE 图标启动 Qoder。

2、登录 Qoder

在 Qoder IDE 右上角，点击用户图标，或使用键盘快捷键（⌘ ⇧ ,（macOS）或 Ctrl Shift ,（Windows）），然后选择登录。

如果还没账号，可以在打开的网页中点击底部的立即注册链接注册个账号，或使用 Google 或 GitHub 账号直接注册。

登录成功后，就会返回 Qoder IDE 后，然后我们可以自由使用所有功能。

整个界面上看，Qoder 操作上跟 VS Code 基本也没区别，本身 Qoder 是基于 VSCode 打造的，所以熟悉 VS Code 的用起来也轻车熟路。

打开你的 React 项目

打开 Qoder。
方法一：菜单 文件 → 打开文件夹，选择你的项目文件夹（例如 my-first-react-app）。
方法二（推荐）：在终端进入项目目录，然后一键打开：
```
cd my-first-react-app
qoder .
```
qoder . 命令会直接用 Qoder 打开当前文件夹。

现在你看到左侧文件 explorer，显示项目结构（如 src、public 等）。

3、开始新聊天

打开智能会话面板

要开始 AI 对话，登录 Qoder，然后在右上角切换次级侧边栏。

或者使用键盘快捷键打开，macOS 快捷键为 ⌘ L，Windows 快捷键为 Ctrl L。

选择模式：

智能问答：一个简单的问答模式，用于解答编程问题，它会基于上下文提供解决方案和建议，但不会修改代码。
智能体：一种自主的编码任务执行模式，具备自我决策、环境感知和工具使用能力，可根据开发者的编码需求，借助项目搜索、制定计划、编辑文件、终端操作等工具，端到端完成编码任务。还支持开发者可配置的 MCP（Model Context Protocol）工具，确保编码工作流与个人开发流程高度契合。

接下来，我们使用智能体模式让它帮我们优化整个项目的样式：

优化整个项目的样式

然后 Qoder 就一顿操作，开始修改，完成后，我们点接受按钮即可：

之后，Qoder 就弹出了完成的效果：

另外 Qoder 还有个 Quest 模式，它是 Qoder 的自主编程功能，让 Agent 端到端完成开发任务，我们只需描述目标，Quest 会自主澄清需求、规划方案、执行代码、验证结果——无需持续人工介入。

要使用 Quest 模式只需要在左上交切换即可：

4、安装必备插件（Extensions）

Qoder 同样也支持安装插件，点击左侧活动栏的 Extensions 图标（四个方块），或按快捷键 Ctrl+Shift+X（macOS: Cmd+Shift+X）打开扩展市场。

搜索并安装以下插件（点击 Install）：

ESLint（作者：Microsoft）
- 实时检查代码规范，React 官方推荐。
- 安装后会在代码中标红错误。
Prettier - Code formatter（作者：Prettier）
- 自动格式化代码，保持风格统一。
ES7+ React/Redux/React-Native snippets（作者：dsznajder）
- 代码片段神器！输入快捷键快速生成组件。
- 常见片段：
  - rafce → 生成箭头函数组件 + export default
  - rfc → 生成函数组件
  - useState → 快速生成 useState
Path Intellisense（作者：Christian Kohler）
- 导入路径自动补全（import 时超级好用）。
Bracket Pair Colorizer 2 或内置括号着色
- 括号颜色区分，便于阅读嵌套 JSX。
GitLens（可选，但强烈推荐）
- Git 增强，查看代码提交历史。