Claude Code Tutorial

What is Claude Code?

Claude Code is a modern, AI-powered coding assistant by Anthropic, designed to drastically boost developer productivity. Running directly in your terminal, it understands your entire codebase and helps you code faster through natural language commands.

Smart Code Understanding

Deep understanding of project structure, dependencies, and code logic

Natural Language Interaction

Describe requirements in Chinese or English, and AI automatically generates code

Native Terminal Experience

No need to leave the terminal, complete all operations directly in the command line

Multi-file Editing

Modify multiple files simultaneously in one conversation, maintaining consistency

Efficiency Comparison

Supported Environments & System Requirements

Supported Platforms

• macOS 12+ (Recommended)

• Ubuntu 20.04+ / Debian 11+

• Windows（requiresrequires installing Git for Windows）

System Requirements

• Node.js 18.0 or higher version

• npm or yarn package manager

• Windows users need to install Git for Windows

• 4GB+ available memory

• Stable network connection

Installation Steps

1. Install Node.js

If Node.js is not yet installed, we recommend using nvm for version management:

# install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# install Node.js LTS
nvm install --lts
nvm use --lts

# Verify Installation
node --version  # Should display v18+ or v20+

⚠ Note for Windows Users

Windows systems additionally require installing Git for Windows, otherwise Claude Code may not run properly. Keep default options during installation.

2. Install Claude Code CLI (Required)

This is the prerequisite for all subsequent configuration. You must first install the Claude Code CLI tool locally:

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

Verify Installation

Run claude --version to confirm successful installation.

API Configuration (Key Step)

1. Get Token

Go to the SpritNest console to get your API Key. Free credits are given upon registration.

2. Configure Environment Variables

Edit the configuration file ~/.claude/settings.json:

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "sk-your-api-key",
    "ANTHROPIC_BASE_URL": "https://aifusion.network/",
    "CLAUDE_CODE_MAX_OUTPUT_TOKENS": "64000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  },
  "permissions": {
    "allow": [],
    "deny": []
  },
  "alwaysThinkingEnabled": false
}

Tip

You can also configure via environment variables: export ANTHROPIC_BASE_URL=https://aifusion.network/and export ANTHROPIC_AUTH_TOKEN="sk-xxx"

3. Configure .claude.json

Edit or create the ~/.claude.json file (on Windows: User Directory/.claude.json), add the following content to skip the initial onboarding flow:

{
  "hasCompletedOnboarding": true
}

Why is this step needed?

After configuring this parameter, Claude Code will skip the official onboarding flow at startup and enter the ready-to-use state directly, avoiding getting stuck on the onboarding page due to network restrictions.

Basic Usage

1. Start Claude Code

# Start in the project directory
cd your-project
claude

2. First Startup Setup

On first startup, Claude Code will automatically scan the project structure. You can directly describe your requirements in natural language:

# Example Conversations
> Help me analyze this project's architecture
> Add a pagination method to UserService
> Fix parameter validation for login API
> Write a unit test covering utils/format.ts

3. Basic Operation Examples

# Asking Claude to explain code
> Explain the logic of src/auth/middleware.ts

# Asking Claude to refactor code
> Refactor this class component into hooks

# Asking Claude to generate code
> Create a CRUD template for a REST API

Common Commands Reference

Common Commands in Interactive Mode

Compress Context

When the conversation is too long and tokens are approaching the limit, use the /compact command to compress the context:

/compact [instructions]  # Can addinstructions，telling Claude which important information to retain

Resume Previous Conversation

Use /resume or add the --resume parameter at startup to resume a previous conversation:

claude --resume        # Restore last conversation on startup
claude --resume <id>   # Resume specific ID conversation

Handling Image Information

Claude Code supports passing images in conversations for analysis. You can directly drag images into the terminal or use path references.

MCP (Model Context Protocol)

MCP (Model Context Protocol) allows Claude Code to connect to external tools and services. Simply create a .mcp.json file in the project root directory to configure.

Best Practices for MCP

Place MCP configuration in the .mcp.json file in the project root directory, so team members can share the same tool configuration.

MCP Configuration Example

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    }
  }
}

Advanced Tips

Project Memory File (CLAUDE.md)

Create a CLAUDE.md file in the project root directory. Claude will automatically read it at each startup to understand the project context:

# Project Architecture
- Frontend：React + TypeScript + Tailwind
- Backend：Node.js + Express + Prisma
- Database：PostgreSQL

# Coding Standards
- Use ESLint + Prettier
- Componentsusefunctional style + Hooks
- Standardize API responses to the { code, data, message } format

# Important Notes
- Do not modify migrations files in the directory
- Environment variables are in .env.example as template

IDE Integration

Claude Code can be used with mainstream IDEs:

• VS Code: Run claude directly in the built-in terminal

• Cursor: Can use both Cursor AI and Claude Code simultaneously

• JetBrains: Start in the Terminal panel

VS Code Plugin: Claude Code for VS Code

Besides using it in the terminal, you can also install the official Claude Code for VS Code plugin in VS Code to get a graphical interactive experience.

💡 Prerequisites

Before using this plugin, you must first install and configure the Claude Code CLI locally (i.e., complete npm install -g @anthropic-ai/claude-code + configure settings.json and .claude.json). The plugin willautomatically read the CLI configuration, no need to configure API Key again in the plugin.

Installation Method: Search for Claude Code (published by Anthropic) in the VS Code extension store, then click Install.

Usage Notes:

• After installation, the plugin will automatically detect the local Claude Code CLI and its configuration

• If the CLI has been correctly configured with API Key and Base URL, the plugin will work directly without popping up a login page

• If the plugin prompts for login, it means the local CLI has not been installed or configured completely. Please complete the installation and configuration steps above first

Usage Tips & Common Issues

Best Practices

1. Let Claude analyze the project structure first, then raise specific requirements

2. Break complex tasks into small steps and complete them gradually

3. Make good use of CLAUDE.md to provide project context

4. Regularly use /compact to compress context and avoid token overflow

5. Review generated code, don't accept blindly

Q: What to do about connection timeout?

Check whether the API address and Key in ~/.claude/settings.json are correct. If using environment variables, confirm that ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN are correctly set.

Q: How to switch models?

Enter /model in the conversation to view and switch available models.

Q: What to do when tokens are used up?

Use /compact to compress context, or /clear to clear the conversation and start over.

Reference Links

• Claude Code 官方文档

• Claude Code GitHub 仓库