Claude Code IDE 完整教学：6 招把 VS Code 变成 AI 双工作台

一、3 秒修 bug：选一段 code 按一个键就改完

先看最猛的。手上一个 Express 写的 Todo API，60 行，里面有个 bug：DELETE 路由的 response 先回，后面才 await。如果换成写 audit 或发 MQ，server 一挂东西就掉了。

以前你会怎么修？切到 Claude 网页、复制这段、贴上、讲半天 context、再把改好的贴回来。现在不用了。

步骤超简单：

• 滑鼠选取第 27 行到 32 行整个 DELETE handler，左下角状态列会显示「6 lines selected」
• 点编辑器右上角的 Claude logo（那个星号 ✱）
• 右侧 Claude panel 跳出，prompt box 下方自动带上「6 lines selected」标记

这就是它正在看的范围，不用你复制贴上。然后直接打：

这段 DELETE 路由怪怪的，response 送出之后还有 await，帮我修。

Claude 开始 thinking，几秒后 diff view 直接在编辑器里跳出来。左边原本的、右边改完的，红绿对比超清楚。它把 await 搬到 res.json 前面，这才是对的顺序——先等 log 完成再回应。

二、从零开始把 Claude Code 装起来

2-A、先搞清楚 Claude Code 是什么

Claude Code 有两个形态，背后跑的是同一个 AI：

• 形态一 CLI：terminal 里面打 claude 就跑起来，纯文字介面、速度最快
• 形态二 IDE extension：装在 VS Code 或 JetBrains 里，有图形介面、有 diff viewer、可以选取程式码直接问。今天教的核心功能在这边

这两个形态用的是同一个帐号、共用对话历史，CLI 里面开的对话可以在 extension 里接着聊。等下的进阶招式会用到 CLI，所以两个都要装。

2-B、3 种帐号路线怎么选

Pro：网页版 Claude + Claude Code 一张订阅通用，每天写 code 2-3 小时够用。Max：每天开 8 个 Claude Code 跑 8 小时才划得来，重度使用者实测比直接用 API 省 93%。API Key：适合企业用 Bedrock、Vertex AI 那种云端供应商。

2-C、装 CLI

开 terminal，一行指令把 CLI 装起来。注意：不要用 npm install，官方推荐用 curl 这条。

curl -fsSL https://claude.ai/install.sh | bash

Windows 用户用 PowerShell：

irm https://claude.ai/install.ps1 | iex

这个方法的好处是自动更新，以后不用自己升级。Mac 也可以用 Homebrew 装，但 Homebrew 那条不会自动更新，要自己 brew upgrade，麻烦。所以推荐 curl 这条。

claude --version

跑得出版本就 OK。输入 claude 然后 Enter，第一次跑会要你登入，浏览器自动跳出来按 Authorize 就好。要切换帐号就打：

/login

2-D、装 VS Code Extension

先讲范围：VS Code、Cursor、Windsurf、Kiro 这几个编辑器都共用同一个 extension，装一次到处能用。

• 按 Cmd+Shift+X 开启 Extensions 面板
• 搜寻栏输入：Claude Code
• 认准 Anthropic 的蓝色验证勾，作者写 anthropic.claude-code，这才是官方的（下面会有山寨的不要点错）
• 点 Install

装完打开任何一个档案，编辑器右上角会多一个 Spark icon（星号 ✱）。点下去 Claude panel 就出来。因为 CLI 已经登过同一个帐号，extension 这边会自动同步，不用再登一次。

2-E、JetBrains 用户看这

IntelliJ、PyCharm、WebStorm、GoLand、Rider、PhpStorm 这些通通共用同一个 plugin。到 JetBrains Marketplace 搜「Claude Code」，认准还挂 Beta 标签的官方版本，安装路径就是 Settings → Plugins → Marketplace，搜到之后 Install、重启，跟装任何 plugin 一模一样。

装完重启之后，右侧 tool window 会多一个 Claude Code 的 icon。核心功能跟 VS Code 那边一样：选取程式码、Plan Mode、checkpoint 倒带，今天教的招式 JetBrains 全部都有。

三、选取程式码的进阶用法：@-mention 跟 @terminal

选取 + 点 Claude icon 是基本款。这边再给你三个延伸用法，用对了你连复制贴上都不用。

@ 档案模糊匹配

@auth

不用知道完整路径，打 @auth 它就模糊匹配出所有相关档案（AuthService.ts、auth.middleware.js 等）。专案大的时候这个救命。

@ 资料夹

@src/components/

后面记得加斜线，它就把整个资料夹当 context 丢进去。

@terminal：我每天都在用

terminal 里跑 npm test 跑出一堆红字错误。以前你会怎么做？选取错误讯息、复制、贴到 Claude——错。

把 terminal 标题重新命名为 tests（右键 → Rename），回到 prompt box 输入：

@terminal:tests 帮我看哪个 test 挂了，修一下

它直接读走 terminal 的内容，整串 error stack 都读进去了，一个字都不用复制。这个功能是隐藏宝藏，看了快 10 支英文教学影片只有一个人提，但你每天会用。

四、Plan Mode：让 Claude 动手前先给你看计画

改一行 bug 简单，refactor 整个档案、加一个 feature 呢？你最不爽的是什么？是 Claude 闷头一顿改，等它停下来你发现它改错方向了，整个白忙。

Plan Mode 就是给你解这个的——它会先讲「我要干嘛」，等你点头再动手。

假设这支 server.js 有 3 个技术债：SQL 散在各 route handler、没有 validation、route handler 太肥。Refactor 这种大事绝对不会直接让它动手，先切 Mode：

• 滑鼠移到 prompt box 右下角，那边有一个闪电图示写着「⚡ Auto mode」
• 点下去，弹出 Modes 选单：Ask before edits、Edit automatically、Plan mode、Auto mode
• 选 Plan mode，右下角指示器变成「Plan mode」

切到 Plan Mode，这样下指令：

这个 server.js 有三个技术债：SQL 重复、没有 validation、route handler 太肥。帮我规划 refactor，不要动手。

注意看，它没有马上吐计画，先去读专案结构。这很关键——它要先搞清楚现况才能规划。

规划中途遇到分岔路，会停下来问你

Claude panel 中间会突然弹出一个带分页的选择题卡片。例如标题「Validation 方式」「拆档深度」两个 tab，问题是「validation 要用哪种方式？」下面四个选项：

• 手刻函式（推荐）——不加依赖
• 用 zod——schema 宣告式但要动 package.json
• 用 express-validator——Express 生态圈标准
• Other

这就是新版 Claude Code 最聪明的地方——它规划到一半发现有歧义，没有自己乱猜，直接弹一张选择题给你。每个选项下面都告诉你 trade-off，连「为什么推荐手刻」的理由都写了。

以前你要嘛一次把所有偏好写进 prompt（写不完整），要嘛它自己选一个你不喜欢的然后你再骂它重来。现在它规划中途遇到分岔路就停下来问你，5 秒钟搞定。

两个问题它一次问完，不会烦你第二次。选完按底部的 Submit answers，Claude 继续跑，几秒后 VS Code 开了一个新的 markdown 文件，是完整的 refactor 计画——validation 那段已经写成 zod schema，不用再去改。整个计画摊成一份 markdown，你可以直接读、直接编辑。

回到 Claude panel 点 Accept Plan，Claude 开始按计画一步步改，三个档案的 diff 依序跳出来，每个档案都是先 diff、你点 Accept 才写进去。

五、搞砸了怎么救：Esc Esc 倒带

现在故意把它弄坏，看怎么救。下一个烂 prompt（先确认 mode 已经切回 Auto mode 或 Edit automatically）：

把 server.js 全部重写，用 class 写，schema 改成 NoSQL 风格。

Claude 真的开始大改，diff 跳出，整个档案被改得面目全非。不假思索按 Accept——server.js 已被整个改写成 class TodoStore + class TodoServer，schema 从 SQL columns 变成 _id + JSON doc。

切到 tests terminal，跑 npm test——红字大爆炸，actual: 201, expected: 400、actual: 404, expected: 200，test 全部挂掉。炸了。表面上 server 跑得起来，但 schema 一改，test 全部不认帐——id 型别变了、回传 status code 变了、validation 逻辑也没了。

以前你怎么救？git checkout、把改动全丢掉、conversation context 也没了，要重讲一次。现在你只要按两下 Esc。

Rewind：Claude Code 的时光机

focus 到 Claude panel，连按 Esc 两下，弹出一个叫做「Rewind to...」的小视窗，副标写着：

Select a message to restore code and fork the conversation from that point.

下面列出历史讯息，最上面那则是刚才那个烂 prompt。底部提示：↑↓ 导航、Enter 选择、Esc 关闭。

它把你跟 Claude 讲过的每一句话都当成一个还原点。选一个讯息，程式码回到那时候、对话也从那一刻分叉重来，一个动作搞定，不用 git，不用重讲 context。

确认视窗：Anthropic 的工程细节

用方向键选烂 prompt 按 Enter，弹出第二个确认视窗「Fork and rewind」，副标 A new forked conversation will be created after rewinding，下面用红绿数字写：

108 lines will be removed and 44 lines will be added across 1 file: server.js

ⓘ Rewinding does not affect files edited manually or via bash.

它直接告诉你：要砍 108 行、加回 44 行、影响哪个档案，全部摊在你面前再让你按下去，不是黑箱还原。

按 Continue，两个视窗都关掉，server.js 瞬间恢复成 refactor 过后的干净版本，Claude panel 上那则烂 prompt 之后的讯息全部消失。3 秒，全部救回来了。

这个功能英文叫 checkpoint，每次 Claude 动档案前自动快照，你不用手动存，它都有帮你存。还有一个进阶招式：hover 到对话里任何一个讯息上面，旁边就会跳出一个 rewind 按钮，点下去一样三选项。Esc Esc 是一键到上一个快照，hover 按钮是回到任意一个。

六、两个 Claude 同时开：多 tab 平行作业

记得开头说「两个 Claude 同时开」吗？这就是每天用得最爽的功能。按 Cmd+Shift+P 开 Command Palette，输入：

Claude Code: Open in New Tab

第二个对话开在新 tab 了，跟第一个是完全独立的 context、独立的历史。一个改后端、一个写前端，互不干扰、各自记得自己的事。

tab 上面那个小圆点会告诉你状态：

• 蓝色：它在等你授权
• 橘色：它跑完了但你 tab 没看

你可以扔着去喝咖啡，回来看哪个亮橘色就先处理哪个。实测这套工作流一周至少省 8 小时，相当于每周多了一个工作天可以做别的事。

进阶用法：开新 window

Claude Code: Open in New Window

开新 window 的话，可以直接拖到第二个萤幕，双萤幕的人这个体验超讚。

七、大结局：/ide 指令大部分人不知道

有些工程师习惯用 iTerm、tmux 这种外部 terminal，字型、配色、tmux session 都已经调好了，VS Code 内建 terminal 没办法一比一复制这套环境。但他们又想要 IDE 的 diff 跟 @-mention 这些好处。/ide 就是给这种情境用的。

• 开一个外部的 terminal app（iTerm 或 Terminal.app），cd 到专案目录跑 claude
• 这时候它跑在外部 terminal、跟 VS Code 没关系
• 在 Claude CLI 里面输入：

/ide

它会自动找到你开着的 VS Code，问你要不要连。连上之后，在 CLI 叫 Claude 改一个档案——diff 还是在 VS Code 里面跳，选取程式码一样自动进 CLI 的 context。等于 CLI 的速度、terminal 的习惯都拿到了，又有 IDE 的 diff 跟编辑器整合，两边好处全包。