makeCoder
  • 对话
  • 智能体
  • 模型&API
  • 知识库
    • 免费注册
    文档

    Visual Studio Code

    由coder创建，最终由coder 被浏览 58 用户

    VSCode是使用最广泛的现代化IDE，Coder + VSCode 也是我们推荐的工作组合之一。

    Coder 运行在 VS Code 的内置终端中，可以直接读取、修改、创建项目中的文件，而 VS Code 负责实时展示这些变更。将 Coder 与 VS Code 结合使用，本质上是把 “CLI 的强执行力” 与 “GUI 的可视化优势” 融为一体。是一种全新的 Agentic Workflow（智能体工作流）。

    快速启动

    第一步：打开集成终端

    在 VS Code 中打开您的项目文件夹，然后使用快捷键打开终端：

    • Windows/Linux: Ctrl + ~ (波浪号键)
    • macOS: Cmd + ~ 或 Ctrl + ~

    第二步：启动 Coder

    在终端中直接输入命令启动交互模式：

    coder

    此时，您的 VS Code 布局应该是这样的：

    • 上方：代码编辑区（您浏览和编写代码的地方）。
    • 下方：Coder 智能体（您下达指令和 AI 执行任务的地方）。

    核心工作流 (Workflow)

    场景一：让 AI 修改当前文件

    当您打开一个文件（例如 src/App.vue）并希望 Coder 进行修改时：

    1. 在编辑器中：打开 src/App.vue。
    2. 在终端中：告诉 Coder 做什么。
    > 帮我给 App.vue 里的登录按钮增加一个 loading 状态，使用 Tailwind CSS

    Coder 的执行过程：

    1. Coder 自动读取文件内容。
    2. Coder 修改文件并保存。
    3. VS Code 自动检测到磁盘文件变化，实时刷新编辑器内容，您不仅能看到修改后的代码，还能立即看到 Git 的变更高亮。

    场景二：基于选中代码提问

    如果您只想针对某一段代码提问：

    1. 在编辑器中：选中代码，复制 (Ctrl+C)。
    2. 在终端中：输入问题。
    > 解释这段代码在做什么，有没有优化的空间？

    场景三：一键修复报错

    当终端运行项目出现报错时，这是 Coder 最擅长的场景。

    # 假设您的项目运行报错了
npm run dev
# Error: ... something went wrong ...

# 直接在同一个终端召唤 Coder
coder "修复上面的报错" @terminal

    (注：如果 Coder 已经在运行中，直接粘贴错误信息即可)

    提升体验的设置 (必读)

    为了让 Coder 和 VS Code 的配合天衣无缝，建议开启以下设置：

    ✅ 开启自动保存

    非常重要！ 由于 Coder 会读取磁盘上的文件，如果您在编辑器里修改了代码但没保存，Coder 读到的就是旧代码。反之亦然。

    • 设置方法：点击 文件 (File) > 自动保存 (Auto Save)。
    • 推荐设置：onFocusChange (焦点移开时保存) 或 afterDelay (延迟保存)。

    ✅ 利用 Git 进行版本控制

    Coder 修改代码非常快，为了防止它改乱了无法回退：

    1. 在让 Coder 执行大规模重构前，先 commit 一次代码。
    2. Coder 修改完后，利用 VS Code 左侧的 源代码管理 (Source Control) 查看 Diff 对比。
    3. 满意则提交，不满意则一键撤销变更 (Discard Changes)。

    高效指令技巧

    在 VS Code 终端中使用这些技巧，效率翻倍：

    • @文件名 精准引用： 虽然 Coder 能自动感知，但显式引用更准确。在终端输入 @，利用 Tab 键补全文件名。

      coder "重构这个文件的异常处理逻辑" @src/services/api.ts

    • /compact 清理记忆： 在 VS Code 终端里跑久了，上下文会很长。输入 /compact 可以在不重启会话的情况下，压缩历史记忆，节省 Token。

    • 多终端并行： 您可以点击 VS Code 终端栏的 + 号，开启两个终端：

      • 终端 1：运行 npm run dev (保持服务器运行)
      • 终端 2：运行 coder (专门用于 AI 交互)

    核心价值

    零摩擦的代码生成

    这是最直观的优势。

    • 双向实时同步：你不再需要像使用网页版 ChatGPT 那样“复制-粘贴”代码。Coder 直接在终端修改文件，VS Code 编辑器会实时刷新显示变更。
    • 所见即所得：你可以看着 AI 一行一行地把代码写进文件里，如果不满意，可以随时打断（Ctrl+C）或撤销。

    上下文感知的调试

    VS Code 的终端是 Coder 的“眼睛”和“手”。

    • 读屏修复：当你在终端运行 npm run dev 报错时，不需要复制错误日志。直接输入 coder "修复这个错误"，Coder 会自动读取终端缓冲区（Terminal Buffer）的历史输出，分析堆栈信息并修复代码。
    • 环境感知：Coder 能感知你当前打开的项目目录结构，知道 package.json 在哪里，知道 src 目录的结构，从而做出更准确的引用。

    可视化的版本控制

    结合 VS Code 强大的 Git GUI 功能，AI 的操作更加安全可控。

    • AI 提交，人类审查：让 Coder 运行 /git:commit 自动生成 Commit Message 并提交。
    • Diff 实时对比：在 Coder 修改代码后，你可以利用 VS Code 左侧的“源代码管理”栏，直观地查看 Diff 对比视图（红色删除，绿色新增），确认无误后再 Push，防止 AI 写出 Bug。

    沉浸式结对编程

    • 分屏协作：你可以将 VS Code 分屏，左边是代码，右边是 Coder 正在写的测试用例。你写业务逻辑，AI 写单元测试，两者并行不悖。
    • 多任务处理：利用 VS Code 的多终端功能。
      • 终端 1：运行服务器日志。
      • 终端 2：运行 Coder 进行交互。
      • 终端 3：执行 Git 操作。
      • Coder 可以读取其他终端产生的文件变化或日志文件。

    精准的上下文引用

    • 文件拖拽引用：想让 Coder 优化某个文件？直接从 VS Code 的左侧文件树中，把文件拖拽到终端里，路径会自动填入。
      • 命令：coder "重构这个文件" [拖入文件] -> coder "重构这个文件" src/utils/api.ts

    项目级重构

    • 批量操作：在 VS Code 中，人类很难手动同时修改 20 个文件。但你可以在终端命令 Coder：“把所有文件里的 axios 替换为 fetch，并更新错误处理逻辑”。
    • 全局搜索与替换：Coder 会遍历 VS Code 当前打开的项目目录，进行全量的查找和修改，完成后你只需在 VS Code 里 Review 即可。

    这种结合让开发者从“打字员”变成了“指挥官”，你只需要在 VS Code 的终端里下达命令，然后看着代码在上方自动生成。

    总结

    VS Code + Coder = AI 结对编程

    • 您负责架构思考和 Code Review。
    • Coder 负责在下方的终端里脏活累活。
    • VS Code 负责实时同步双方的工作成果。

    现在，在您的终端里输入 coder，开始体验这种流畅的开发模式吧！

    \

    {link}