Cline (VS Code)

​

Quick Installation

​

1. Install Plugin

​

2. Configure APIYI

1. Click the Cline icon on the left
2. Click settings button (gear icon)
3. Select OpenAI Compatible
4. Configure parameters:
   • Base URL: https://api.apiyi.com/v1
   • API Key: Your APIYI key
   • Model Name: Enter model name

​

Recommended Models

​

🎯 Programming Development First Choice

• claude-sonnet-4-20250514 ⭐ (Claude 4 latest, extremely strong programming)
• o4-mini (OpenAI reasoning model, first choice for programming tasks)
• gemini-2.5-pro ⭐ (2M context, strong multimodal)
• deepseek-coder (Code-specialized model, 128K context)

​

💡 Complex Reasoning Tasks

• o3 ⭐ (Latest reasoning model, significantly reduced pricing)
• claude-sonnet-4-20250514-thinking (Claude 4 chain-of-thought mode)
• deepseek-r1 ⭐ (Latest reasoning model, 64K context)
• grok-3-mini (Lightweight model with reasoning)

​

🚀 Fast Response

• gpt-3.5-turbo (Classic model, high cost-performance)
• gemini-2.5-flash ⭐ (Fast, low cost, 1M context)
• claude-3-haiku (Lightweight fast version, 200K context)
• gpt-4o-mini (Lightweight fast version, 128K context)

​

💰 Super Cost-Effective

• deepseek-chat (128K context, strong overall capability)
• qwen-turbo (Alibaba Qwen fast version)
• gpt-4.1-nano (Ultra-low cost version, 128K context)

​

Core Features

​

Smart Code Completion

# Input comment, AI auto-generates code
# Calculate the nth Fibonacci number
def fibonacci(n):
    # Cline will auto-complete implementation

​

Code Explanation

• Cline: Explain Code: Explain code
• Cline: Explain Error: Explain errors

​

Code Refactoring

• Performance Optimization: Provide optimization suggestions
• Improve Readability: Refactor complex code
• Fix Issues: Auto-fix common problems

​

Generate Tests

// Original function
function add(a, b) {
    return a + b;
}

// Test generated by Cline
describe('add function', () => {
    test('should add two numbers correctly', () => {
        expect(add(2, 3)).toBe(5);
        expect(add(-1, 1)).toBe(0);
    });
});

​

Common Commands

​

Advanced Features

​

Multi-File Operations

"Move functions from utils.js to helpers.js and update all references"

​

Architecture Design

Please design architecture for e-commerce admin system including:
- User management
- Product management
- Order processing
- Data analysis
Using React + Node.js + PostgreSQL

​

Code Review

Review PR:
- Check code standards
- Find potential bugs
- Performance optimization suggestions
- Security vulnerability scan

​

Usage Tips

​

1. Context Management

// @context: React component for user authentication
// @requirements: Support OAuth2 login flow
// @constraints: Compatible with NextJS 13+

// AI generates more accurate code based on context

​

2. Custom Prompts

{
    "cline.customPrompts": {
        "codeReview": "Review code focusing on performance, security, standards",
        "optimize": "Optimize code performance and readability",
        "document": "Generate detailed Chinese documentation"
    }
}

​

3. Project-Level Configuration

{
    "model": "claude-3-5-sonnet-20241022",
    "temperature": 0.7,
    "language": "zh-CN",
    "codeStyle": {
        "naming": "camelCase",
        "indent": 4,
        "quotes": "single"
    }
}

​

Troubleshooting

​

Connection Failed

• Base URL: https://api.apiyi.com/v1
• API key is valid
• Network connection is normal

​

Response Timeout

1. Use faster models
2. Reduce request complexity
3. Break down large tasks

​

Poor Generation Quality

1. Provide more context
2. Use more powerful models
3. Specify requirements clearly

​

Best Practices

​

1. Model Selection Strategy

​

2. Prompt Optimization

❌ Bad prompt: Fix this function

✅ Good prompt: Fix floating point precision issue in calculateTotal function,
ensure amount calculation accurate to 2 decimal places

​

3. Progressive Development

1. Generate basic framework first
2. Gradually add features
3. Finally optimize performance
4. Add error handling

​

4. Security Awareness

• Don’t include sensitive information in code
• Review AI-generated code
• Verify third-party dependencies
• Watch for security vulnerabilities

​

Integration Workflow

​

Git Integration

# Auto-generate commit message
git add .
# Cline: Generate commit message based on changes

​

Test-Driven Development

1. Write test cases first
2. Cline generates implementation code
3. Run tests to verify
4. Iterate and optimize

​

CI/CD Integration

# Cline can generate GitHub Actions config
name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run tests
        run: npm test

​

Token Optimization & Cost Control

​

1. Monitor Token Usage

• Real-time Monitoring: Check estimated cost in Cline sidebar
• Session Limits: Keep sessions short, avoid context accumulation
• Regular Reset: Complete long tasks in multiple sessions

​

2. Smart Model Switching

Planning Phase → DeepSeek-R1 or o3 (strong reasoning, low cost)
Implementation Phase → Claude-4-Sonnet or o4-mini (strongest programming)
Simple Tasks → GPT-3.5-Turbo or Gemini-2.5-Flash (fast)
Long Text → Gemini-2.5-Pro (2M context)

​

3. Using .clinerules Configuration

# Limit Cline operation scope
- Don't allow modifying node_modules
- Don't allow deleting important files
- Limit number of files modified at once
- Require confirmation for destructive operations

​

4. Alternative Solutions to Reduce Cost

​

GitHub Copilot Pro Integration

• Monthly fee only $10, unlimited use
• Use through VSCode LM API
• Suitable for high-frequency scenarios

​

Local Models (Ollama)

# Install Ollama and run local models
ollama run deepseek-coder:6.7b
ollama run qwen2.5-coder:7b
ollama run codellama:13b

​

Use Domestic Models to Reduce Cost

• qwen-turbo (Alibaba Qwen)
• glm-4 (Zhipu Tsinghua)
• ernie-4.0 (Baidu Wenxin)

​

5. Cache Optimization

• Use services like Requesty Router
• Can save over 50% API cost
• Auto-cache repeated requests

​

Advanced Best Practices

​

1. Plan/Act Mode Usage

• Plan Mode: For design and review, read-only
• Act Mode: Direct implementation, suitable for simple tasks
• Model Memory: Cline remembers model preference for each mode

​

2. Context Management Skills

// Explicit context comments
// @context: React 18 + TypeScript 5
// @requirements: Support SSR, compatible with Next.js 14
// @constraints: Don't use external state management library
// @performance: First screen load < 3s

​

3. Task Management System

• Bookmark Important Conversations: Use star feature
• Export Valuable Content: Save as Markdown
• Task Sorting: Sort by cost, Token usage
• Batch Cleanup: Regularly clean low-value sessions

​

4. Avoid Token Explosion

❌ Wrong Approach:
- Handle multiple unrelated tasks in same session
- Let Cline read entire large codebase
- Constantly changing requirements causing context confusion

✅ Correct Approach:
- Start new session for each feature
- Only include relevant files
- Start after clarifying requirements
- Commit code immediately after completion

​

5. Cost-Benefit Analysis

​

6. Workflow Optimization

# 1. Planning Phase (use reasoning models)
"Use o3 or DeepSeek-R1 to analyze requirements and develop architecture"

# 2. Implementation Phase (use programming-specialized models)
"Switch to Claude-4-Sonnet or o4-mini to implement core features"

# 3. Testing Optimization (use fast models)
"Use Gemini-2.5-Flash or GPT-3.5-Turbo for unit testing and optimization"

# 4. Documentation Phase (use comprehensive models)
"Use GPT-4.1 or Qwen-Max to generate project documentation"

# 5. Code Review (use long-context models)
"Use Gemini-2.5-Pro for comprehensive code review"

​

Performance Optimization

​

1. Model Switching

• Development phase: Lightweight models
• Complex tasks: Advanced models
• Production: Balance performance and cost

​

2. Caching Strategy

• Enable response caching
• Cache common code snippets
• Regularly clean cache

​

3. Request Optimization

• Batch related requests
• Use streaming responses
• Set reasonable timeouts