使用 Qoder 开发 React

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

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

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

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

1、下载并安装 Qoder

根据你的电脑系统，从 https://qoder.com/download 下载安装程序。

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

相关链接：

2、登录 Qoder

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

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

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

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

打开你的 React 项目

  1. 打开 Qoder。

  2. 方法一：菜单 文件 → 打开文件夹，选择你的项目文件夹（例如 my-first-react-app）。

  3. 方法二（推荐）：在终端进入项目目录，然后一键打开：

    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 增强，查看代码提交历史。

React 专属推荐（可选进阶）：

  • Tailwind CSS IntelliSense（如果用 Tailwind）
  • React Developer Tools（浏览器插件已安装，这里不需要）

安装完成后，重启 Qoder（或按 Ctrl+Shift+P → Reload Window）。