Aller au contenu

Cline Cheat Sheet

Overview

Cline is an autonomous AI coding agent that runs as a VS Code extension. It can read and write files, execute terminal commands, browse the web, and interact with your entire project context. Unlike simple code completion tools, Cline operates as a full agent that can plan and execute multi-step tasks with human-in-the-loop approval.

Cline supports multiple LLM providers including Anthropic Claude, OpenAI, Google Gemini, AWS Bedrock, and local models via Ollama or LM Studio. It tracks API costs in real time, supports custom system prompts, and provides a diff-based editing workflow that lets you review every change before it is applied.

Installation

VS Code Extension

# Install from VS Code marketplace
code --install-extension saoudrizwan.claude-dev

# Or search "Cline" in VS Code Extensions panel (Ctrl+Shift+X)

Initial Configuration

  1. Open VS Code and press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
  2. Type “Cline” and select Cline: Open
  3. Choose your API provider and enter your API key
  4. Select your preferred model

API Provider Setup

# Anthropic (recommended)
# Get key from https://console.anthropic.com
# Set in Cline settings: API Provider → Anthropic

# OpenAI
# Get key from https://platform.openai.com
# Set in Cline settings: API Provider → OpenAI

# Local models via Ollama
ollama pull deepseek-coder-v2
# Set in Cline settings: API Provider → Ollama → http://localhost:11434

Core Features

Task Types

TaskExample Prompt
Create new files”Create a React component for a user profile card with TypeScript”
Refactor code”Refactor the auth module to use dependency injection”
Fix bugs”Fix the race condition in the websocket handler”
Write tests”Write unit tests for the payment service using Jest”
Run commands”Install Express and set up a basic REST API server”
Explain code”Explain how the caching layer works in this project”
Documentation”Add JSDoc comments to all exported functions in src/utils/“

Keyboard Shortcuts

ShortcutAction
Ctrl+Shift+P → ClineOpen Cline panel
EnterSend message / approve action
EscapeCancel current operation
Click “Approve”Accept a proposed file change
Click “Reject”Decline a proposed change
Click “Save”Save approved changes to disk

Chat Commands

# Reference specific files
@filename.ts    Look at this file and fix the import errors

# Reference folders
@src/components  Refactor all components to use the new design system

# Add context
@package.json   Update dependencies and fix any breaking changes

# Web browsing
Open https://api-docs.example.com and implement the /users endpoint based on the docs

Configuration

Settings (VS Code Settings JSON)

{
  "cline.apiProvider": "anthropic",
  "cline.apiModelId": "claude-sonnet-4-20250514",
  "cline.maxFileLineCount": 500,
  "cline.customInstructions": "Always use TypeScript strict mode. Prefer functional components in React. Write tests for all new functions.",
  "cline.alwaysAllowReadOnly": true,
  "cline.alwaysAllowWriteOnly": false,
  "cline.enableCheckpoints": true
}

Custom System Prompts

Create a .clinerules file in your project root:

# .clinerules
You are working on a Next.js 14 application with App Router.
- Use server components by default
- Use TypeScript strict mode
- Follow the existing project patterns in src/
- Always handle errors with proper error boundaries
- Write Playwright tests for new pages
- Use Tailwind CSS for styling

Cost Management

{
  "cline.maxAutoApprovedSpend": 5.00,
  "cline.requestDelayMs": 1000,
  "cline.preferCheaperModel": true
}

Advanced Usage

MCP Server Integration

Cline can connect to Model Context Protocol (MCP) servers for extended capabilities:

// .vscode/mcp.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
      }
    }
  }
}

Autonomous Mode

# Enable auto-approve for read-only operations
Settings → Cline → Always Allow Read Only: ✓

# For trusted tasks, enable auto-approve writes
Settings → Cline → Always Allow Write Only: ✓

# Set spending limit for autonomous runs
Settings → Cline → Max Auto Approved Spend: 10.00

Multi-File Refactoring

# Example: Migrate from REST to GraphQL
Prompt: "Migrate the user management module from REST endpoints to GraphQL.
Update the following:
1. Create GraphQL schema in src/graphql/
2. Implement resolvers
3. Update the client-side API calls
4. Update tests
5. Remove old REST routes"

Checkpoints and Rollbacks

Cline creates checkpoints before making changes. To rollback:

  1. Open the Cline panel
  2. Find the checkpoint in the task history
  3. Click “Restore Checkpoint” to revert all changes

Browser Integration

# Cline can browse websites for context
Prompt: "Go to https://docs.stripe.com/api/charges and implement
the charge creation endpoint based on the latest API docs"

# Screenshot-based debugging
Prompt: "Run the dev server, open localhost:3000, and fix
any visual issues you see on the homepage"

Troubleshooting

IssueSolution
API key not workingVerify the key in provider’s dashboard; check for billing limits
High token usageUse @file references to limit context; break large tasks into smaller ones
Extension not loadingReload VS Code window (Ctrl+Shift+P → “Reload Window”)
Slow responsesSwitch to a faster model; reduce max file line count in settings
Changes not applyingCheck the diff view and click “Approve” explicitly
Terminal commands failingEnsure VS Code terminal has proper PATH and permissions
Cost unexpectedly highSet maxAutoApprovedSpend and review token counts in the panel
MCP server not connectingCheck the server command path and verify it runs independently
Context window exceededBreak the task into smaller steps or use @file to limit scope