跳到正文
DEV Community· HIROKI II·· 3 小時前AI 評分50

Claude Code 2.0:即時回退讓 CLI 編碼更安心

Claude Code 2.0: Instant Rewind and Zero-Fear CLI Coding

AI 導讀

Claude Code 2.0 的 Checkpoints 與 Rewind 可透過連按兩次 Esc 或輸入 /rewind,將工作區還原至上一操作前的狀態。文章亦介紹 Anthropic 的 VS Code 擴充功能(Beta),以紅色和綠色內聯差異標示待移除或改動、以及新增的程式碼,並提及 /usage 可查看 token 用量、快取命中率和工作階段費用。

正文

You ask an AI coding assistant to add a clean dark mode toggle to your personal portfolio page.

You hit Enter. In the terminal window, lines of shell commands and tool calls flash past in rapid succession. Before you can even parse what happened, the assistant proudly reports: "All modifications completed. Please review your page."

You refresh your browser with high expectations, only to freeze in dismay: the carefully centered header navigation is completely misaligned, typography scale has broken across breakpoints, and the entire layout is shattered.

In a mild panic, you type into the prompt: "Please revert it back to how it was!"

The assistant politely responds: "Certainly, restoring previous state now." Another flurry of terminal edits ensues. Not only is the original layout still broken, but the footer copyright text and image assets have mysteriously vanished as well.

In reality, the problem isn't user proficiency. The historical issue with CLI coding agents has always been irreversibility and opacity: you cannot easily inspect what line was touched, and if an edit goes awry, the agent itself often struggles to reconstruct the clean initial state.

In Claude Code 2.0, Anthropic directly addressed this friction by introducing an uncompromised physical fallback: Checkpoints and Rewind. You do not need to memorize complex Git revert commands or duplicate project folders beforehand. Pressing Esc twice in rapid succession, or typing /rewind, instantly restores your entire workspace to the exact state prior to that action.


Hands-on Experiment: Intentionally Breaking and Restoring Code

The fastest way to build confidence with any developer tool is to intentionally break something and witness its instant restoration.

Create an isolated directory containing a minimal index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <style>
    body { font-family: sans-serif; background: #ffffff; color: #333333; padding: 40px; text-align: center; }
    h1 { color: #2563eb; }
    p { font-size: 18px; line-height: 1.6; }
  </style>
</head>
<body>
  <h1>Welcome to My Workspace</h1>
  <p>A clean, carefully spaced layout with verified typography and balanced margins.</p>
</body>
</html>

Launch Claude Code inside this folder to execute our two-step experiment.

Step 1: Trigger an Aggressive, Unwanted Transformation

Provide a deliberately disruptive prompt:

"Read index.html and completely rewrite the styling into a high-contrast cyberpunk aesthetic with neon green glowing borders, aggressive box shadows, and replace the text with dramatic technical slogans."

Claude Code analyzes the file and commits the rewrite. Refreshing index.html in your browser confirms the disruption: aggressive colors have overwritten your calm design, and original copy has been replaced.

Step 2: The Double-Esc Instant Rewind

Instead of writing a defensive multi-paragraph prompt asking the model to undo its changes, keep your hands on the keyboard:

Press Esc twice quickly.

Alternatively, submit the command:

/rewind

Claude Code 2.0 addresses this with an official VS Code extension (Beta):

1. Open VS Code and navigate to the Extensions marketplace.
2. Search for `Claude Code` by Anthropic and install it.
3. A dedicated Claude icon appears on your primary sidebar, providing an integrated conversational interface right alongside your editor tabs.

### Live Inline Diffs

When you instruct the assistant from this sidebar—for example, "Add a floating back-to-top button"—the extension renders a **live inline diff** directly in the editor buffer:

- **Red highlights on the left**: exact code lines slated for removal or refactoring.
- **Green highlights on the right**: newly proposed code.

This transforms code review into an intuitive markup process. You inspect proposed changes line by line, accept what works, reject what overreaches, or trigger a rewind whenever needed.

---

## Transparent Accounting: Removing Token and Billing Anxiety

### Real-time Cost Verification with /usage

At any point during a session, submit:


text
/usage


The terminal prints a concise breakdown:
- Input tokens, output tokens, and cache hit percentage.
- Exact monetary expenditure incurred during the session.

In practice, a full cycle of editing, testing, and rewinding a basic web component typically consumes under $0.02.

### Steering Thought Process with Tab

Pressing `Tab` allows you to toggle and inspect the model's Thinking mode. When active, Claude Code outputs its analytical deductions in real time before touching any files. If its architectural reasoning veers off course, you can interrupt it immediately with `Ctrl+C`.

---

## Practical Habits for Daily Workflows

1. **Leverage `Ctrl+R` for Command History**: Search past prompts instantly instead of retyping complex refactoring directives.
2. **Decompose Tasks into Atomic Turns**: Requesting typography tweaks in turn one and interactive components in turn two keeps checkpoints granular.
3. **Delegate Heavy Verification to Subagents**: For long-running test suites or large file indexing, dispatch background subagents.

---

## What You Can Safely Postpone

- **Complex Git Branching & Rebasing**: Daily local prototyping with Claude Code's native `/rewind` provides 95% of the safety net needed for small projects.
- **Custom Agent SDK Orchestration**: Interactive, human-in-the-loop verification remains the most reliable operating mode.
- **Terminal Theme & Shell Customization**: The out-of-the-box VS Code layout provides optimal ergonomics from day one.

---

### Sources and Verification Boundaries

- **Anthropic Official Release Announcement**: https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously (September 29, 2025).
- **Claude Code Repository Releases**: https://github.com/anthropics/claude-code/releases (Version 2.0 changelog).

An interactive Checkpoint dialog immediately surfaces. It cleanly displays the file changes introduced by the last turn and prompts for confirmation to rewind.

Press Enter to confirm.

Return to your browser and refresh index.html. The neon borders and altered text vanish instantly. The original clean typography, white background, and exact copy are restored in full fidelity.

The takeaway is straightforward: You don't need advanced version control gymnastics to feel safe. Double-tapping Esc or executing /rewind gives you a reliable, built-in undo mechanism for agentic actions.


Beyond the Terminal: Live Inline Diffs in VS Code

Once rewind eliminates the fear of catastrophic edits, the next challenge is visibility: understanding exactly what changed before you accept it.

In pure terminal environments, edits scroll by as fast-moving diff logs. For designers and product builders, scanning hundreds of terminal lines to verify an edit is exhausting.

來源:DEV Community · dev.to