Claude Code 入門

Claude Code is different from other AI coding tools. Cursor and Copilot live inside your editor, suggesting lines as you type. Claude Code lives in your terminal, like a colleague sitting next to you who can read your entire project, write files, run tests, search the web, and execute shell commands — all while you describe what you want in plain English.

This guide gets you from zero to productive. No fluff, no theory — just what you need to know to start using it effectively today.

安裝 Claude Code

Claude Code requires Node.js 18+ and an Anthropic API key (or a Max subscription). Install it globally:

npm install -g @anthropic-ai/claude-code

Then navigate to any project directory and launch it:

cd your-project
claude

That’s it. Claude Code starts, scans your project structure, and presents a prompt. You’re ready to go.

你的第一次對話

The best way to learn Claude Code is to give it a real task. Don’t start with “hello” — start with something you actually need done.

Claude Code will read the relevant files, understand the context, propose changes, and — with your permission — make them. You approve each action: file reads happen automatically, but writes and shell commands ask for confirmation.

權限系統

Claude Code uses a layered permission model. Understanding it saves you from clicking “approve” a hundred times.

• Always allowed: Reading files, searching code, listing directories. Claude Code needs to understand your project — let it.
• Ask once: Writing files, creating files. The first time, it asks. After you approve, it remembers for the session.
• Always ask: Shell commands, destructive operations. You always confirm before Claude Code runs npm install, git push, or anything that modifies state outside your files.

CLAUDE.md 檔案

This is the most important file most people don’t know about. Create a CLAUDE.md in your project root with instructions that persist across sessions:

# CLAUDE.md

## Project context
This is a Next.js 14 app with TypeScript, Prisma ORM, and Tailwind CSS.
The API routes are in app/api/. Auth uses NextAuth v5.

## Conventions
- Use server components by default, client components only when needed
- All database queries go through the service layer in src/services/
- Tests use Vitest, run with `npm test`
- Never modify the migration files directly

## Current work
- We're migrating from Pages Router to App Router
- The /dashboard route is the active focus

Claude Code reads this file automatically at the start of every session. It’s your way of giving Claude persistent context about your project without repeating yourself. Think of it as the onboarding doc you’d write for a new team member.

必備的斜線指令

Type / in the prompt to see all commands. The ones you’ll use most:

重要的鍵盤快捷鍵

怎麼有效地下提示詞

Claude Code understands your codebase, so you don’t need to explain your project from scratch. But how you phrase requests dramatically affects results.

對結果要具體

不明顯時就給上下文

You don’t need to describe your project structure (Claude Code can read it), but you should share information it can’t see: error messages, browser-specific behavior, what you’ve already tried, and what you suspect.

用迭代式精修

Don’t try to get everything right in one prompt. Start with the main task, review the result, then refine:

1. Add a dark mode toggle to the settings page
2. (reviews the implementation)
3. Good, but persist the preference in localStorage and apply it on page load before render to prevent flash
4. Now add a system preference detection fallback for first-time users

Each follow-up builds on the context of what Claude Code just did. This iterative approach produces better results than a single massive prompt.

真實工作流

修 bug

Paste the error message or describe the symptom. Claude Code will search your codebase for relevant code, identify the root cause, and propose a fix.

Users are reporting that the checkout total shows $0 when they have
items in cart. Here's the error from the console:

TypeError: Cannot read property 'price' of undefined
at calculateTotal (src/utils/cart.ts:42)

Claude Code will read cart.ts, trace the data flow, find why price is undefined, and fix it.

實作功能

Describe what you want. Be clear about the scope — a feature that touches one file is easier to get right than one that touches twenty.

Add a "forgot password" flow:
1. A "Forgot password?" link on the login page
2. A form that accepts email and sends a reset link
3. A reset page where users enter a new password
4. Use the existing email service in src/services/email.ts
5. Tokens should expire after 1 hour

程式碼審查

The /review command reviews your uncommitted changes. Or be more specific:

Review the changes in src/api/ for security issues.
Focus on: input validation, SQL injection, auth bypass, and rate limiting.

重構

Refactor src/utils/helpers.ts — it's 800 lines of unrelated functions.
Split it into focused modules: string-utils.ts, date-utils.ts,
validation.ts, and formatting.ts. Update all imports across the codebase.

Claude Code handles multi-file refactors well because it can read and modify all the affected files in one session.

理解陌生程式碼

I just joined this project. Walk me through how a request flows from
the API endpoint in src/app/api/orders/route.ts to the database.
What middleware does it pass through? How is auth handled?

Claude Code 擅長的地方

• Codebase-aware changes: It reads your actual code, not just the current file. It understands imports, types, patterns, and conventions.
• Multi-file edits: Renaming a function, moving code between files, updating imports — it handles the cascade.
• Boilerplate and patterns: CRUD endpoints, form validation, test scaffolding, migration files — anything with a clear pattern.
• Debugging: Paste an error, it reads the relevant code, traces the issue, proposes a fix.
• Explaining code: “What does this regex do?” or “How does the auth middleware work?”
• Git operations: Commits with meaningful messages, reviewing diffs, creating branches.

要留意的地方

• Large-scale architecture changes: Claude Code handles file-level changes well. System-level redesigns (“migrate from monolith to microservices”) need to be broken into smaller, verifiable steps.
• Hallucinated APIs: Claude Code may reference library APIs that don’t exist or use outdated syntax. Always verify unfamiliar method calls against the library’s actual documentation.
• Overconfident fixes: Sometimes it “fixes” a bug by suppressing the error rather than addressing the root cause. Review changes with the same skepticism you’d apply to a PR from a junior developer.
• Context limits: Very long sessions accumulate context. If responses degrade, use /compact to compress the conversation or /clear to start fresh while keeping your CLAUDE.md context.

進階:hooks

Hooks let you run custom commands automatically in response to Claude Code’s actions. They’re defined in your settings and trigger before or after specific events.

Example: automatically run your linter after every file edit:

// In .claude/settings.json
{
  "hooks": {
    "afterEdit": {
      "command": "npx eslint --fix ${file}",
      "description": "Auto-lint after edits"
    }
  }
}

Hooks are powerful for enforcing project standards without relying on Claude Code to remember them.

Claude Code vs. 其他 AI 程式工具

The landscape is competitive. Here’s how they compare:

• GitHub Copilot: Autocomplete-focused. Lives in your editor, suggests line-by-line as you type. Best for: filling in code you’ve already started writing.
• Cursor: Editor-focused (VS Code fork). Inline editing, multi-file changes, codebase-aware chat. Best for: developers who want AI deeply integrated into their editor.
• Windsurf: Editor-focused (VS Code fork). Similar to Cursor with “Cascade” for multi-step workflows. Best for: teams wanting a free-tier AI editor.
• Claude Code: Terminal-focused. Full agent with tool use, shell access, and autonomous multi-step execution. Best for: developers comfortable in the terminal who want an AI that can independently research, implement, test, and commit.

They’re not mutually exclusive. Many developers use Copilot for inline autocomplete and Claude Code for larger tasks — like having both a spellchecker and a writing partner.

精簡版

1. Install: npm install -g @anthropic-ai/claude-code
2. Launch in your project: cd your-project && claude
3. Create a CLAUDE.md with project context and conventions
4. Start with a real task, not “hello”
5. Be specific about what you want
6. Iterate: first pass, review, refine
7. Use /compact when context gets long
8. Trust but verify — review changes like any PR

Claude Code is most powerful when you treat it like a capable but junior colleague: give it clear instructions, review its work, and build trust incrementally. The more context you provide (through CLAUDE.md and specific prompts), the better the results.

The cursor is blinking. What do you want to build?