Claude Code Complete Tutorial

# npm install (recommended)
npm install -g @anthropic-ai/claude-code

# Users in China can speed this up with the Taobao mirror
npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com

# Add to ~/.bashrc or ~/.zshrc
export ANTHROPIC_BASE_URL=https://api.qcode.cc/api
export ANTHROPIC_AUTH_TOKEN=cr_your_api_key

source ~/.bashrc  # or source ~/.zshrc

# Check the version
claude --version
# Prints a version number (yours may differ, see https://github.com/anthropics/claude-code/releases)

# Quick test
claude -p "Hello, please introduce yourself"

# Bash
claude completion bash >> ~/.bashrc

# Zsh
claude completion zsh >> ~/.zshrc

# Fish
claude completion fish > ~/.config/fish/completions/claude.fish

cd ~/my-project
claude

╭─────────────────────────────────────────╮
│ claude                                   │
│                                          │
│ Project: my-project                      │
│ Model: claude-sonnet-5                   │
│ Context: 12,345 / 1,000,000 tokens       │
╰─────────────────────────────────────────╯

> _

> Analyse this project's architecture and tell me the main modules and how they relate

Claude wants to run:
  Tool: Bash
  Command: npm test

  [y] allow  [n] deny  [a] always allow in this session

# Enter plan mode
> /plan

# Or trigger it from the prompt
> Analyse the requirements and draft a plan first — don't change any code yet

> /plan
> I want to add JWT-based user authentication to this project

Claude: Let me analyse the current project structure and draft a plan...

📋 Plan:
1. Create src/middleware/auth.ts — JWT verification middleware
2. Create src/services/auth-service.ts — authentication business logic
3. Modify src/routes/index.ts — add login/register routes
4. Create src/models/user.ts — user data model
5. Add dependencies: jsonwebtoken, bcrypt
6. Create test files

Does this plan work? Anything to adjust?

> I've been chasing this concurrency bug for two days. Analyse the race condition in src/worker.ts

[Claude reasons internally for thousands of tokens, walking execution paths, locking and timing]

Claude: Found it. On line 127 of worker.ts...

> Review this PR for me, and check for security issues at the same time

Claude: I'll start two subagents in parallel:

  - Subagent 1: code quality review
  - Subagent 2: security vulnerability scan

# Check current context usage
/cost

# Compact the context (keep what matters, free space)
/compact

# Start a completely new session
/clear

# Claude analyses the project and generates the file
/init

# MyApp

## Tech Stack

- React 19 + TypeScript 5.x + Vite
- Styling: Tailwind CSS v4
- State: Zustand
- Testing: Vitest + Testing Library

## Commands

- Dev: `pnpm dev`
- Test: `pnpm test`
- Build: `pnpm build`
- Lint: `pnpm lint`

## Coding Standards

- Function components only; define Props with an interface
- The any type is not allowed
- CSS through Tailwind utility classes only
- Commit format: feat: / fix: / docs:

## Project Structure

- src/components/ — reusable components
- src/pages/ — page components
- src/hooks/ — custom hooks
- src/lib/ — utility functions
- src/api/ — API request wrappers

## Notes

- Node.js 22+, pnpm as the package manager
- All API requests go through src/api/client.ts

# Switch inside an interactive session
/model opus    # switch to Opus
/model sonnet  # switch to Sonnet
/model haiku   # switch to Haiku

# Specify at launch
claude --model claude-opus-5

A day's model usage:
├── Sonnet 5 (70%) — everyday development, bug fixes, tests
├── Opus 5  (15%) — architecture decisions, hard problems
└── Haiku 4.5 (15%) — formatting, simple questions, bulk operations

# Plan with Opus first
/model opus
> Analyse this module's architecture and draft a refactoring plan

# Once the plan is agreed, switch to Sonnet to execute
/model sonnet
> Carry out step one of the plan

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write $FILEPATH"
          }
        ]
      }
    ]
  }
}

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_TOKEN": "ghp_xxx" }
    }
  }
}

# List available skills
/skills

# Use a specific skill
> /commit    # generate a commit with the commit skill
> /review    # review code with the review skill

claude --bare -p "List every TODO comment" --output-format json

cd ~/unfamiliar-project
claude

> Analyse this project:
> 1. which technologies it uses
> 2. the core modules and their responsibilities
> 3. how data flows through it
> 4. draw a simple architecture diagram (ASCII)

> /plan
> I need to add rate limiting to the API:
> - at most 60 requests per minute per user
> - store counters in Redis
> - return 429 with a Retry-After header when exceeded

Claude:
📋 Plan:
1. Install dependency: ioredis
2. Create src/middleware/rate-limiter.ts
3. Create src/config/rate-limit.ts (settings)
4. Modify src/app.ts (register the middleware)
5. Create tests/rate-limiter.test.ts
6. Update docker-compose.yml (add the Redis service)

Confirm and I'll start.

> The plan looks good, go ahead

/model opus
> Users report that "stock occasionally goes negative when orders are placed concurrently".
> Analyse src/services/order-service.ts and src/services/inventory-service.ts,
> find the concurrency bug and fix it.

[Opus engages Extended Thinking and walks execution paths, locking and transaction isolation levels]

Claude: Found it. On line 45 of inventory-service.ts the stock check and the decrement are not in the same transaction,
which is a TOCTOU race. The fix is to use SELECT FOR UPDATE...

> All class components in the project need to become function components + Hooks.
> Work through every .tsx file under src/components/ one at a time.

Claude will:
1. Find every class component
2. Convert them one by one to function components
3. Turn lifecycle methods into useEffect
4. Turn this.state into useState
5. Run the tests to confirm nothing broke

> Write a complete unit test suite for src/services/user-service.ts:
> - cover every public method
> - include both happy and error paths
> - mock external dependencies (database, cache)
> - target 90%+ coverage

# Inside GitHub Actions
claude -p "Review the code changes in this PR, focusing on security and performance" \
  --output-format json \
  --max-turns 3 \
  --allowedTools Read,Glob,Grep

# 1. Claude Code drafts the plan
claude
> /plan
> Design an implementation plan for the user permission system

# 2. Codex executes it
codex "Follow the plan in PLAN.md and implement steps 1-3"

# Option 1: use sudo
sudo npm install -g @anthropic-ai/claude-code

# Option 2: manage Node.js with nvm (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 22
npm install -g @anthropic-ai/claude-code

# Check the configuration
echo $ANTHROPIC_BASE_URL    # should be https://api.qcode.cc/api
echo $ANTHROPIC_AUTH_TOKEN  # should start with cr_

# Test connectivity
curl -s -o /dev/null -w '%{http_code}\n' \
  -H "Authorization: Bearer $ANTHROPIC_AUTH_TOKEN" https://api.qcode.cc/api/v1/models
# -> 200 + a JSON model list = address, key and network all fine